Làm cách nào để căn chỉnh văn bản ở giữa phần tử với CSS trong Twitter Bootstrap?

Question

Tôi đang sử dụng Bootstrap cảnh báo và đây là thành công của tôi thông điệp cảnh báo:

<div class="alert alert-success" id="UploadSuccess"> 
    <a class="close" data-dismiss="alert">×</a> 
    <strong>Congrats!</strong> You have successfully did it!. 
</div> 

Và kết quả là:

Như bạn sẽ có thể thấy rằng sự liên kết văn bản là ở đầu của số <div>. Vì vậy, làm thế nào II sẽ sắp xếp nó vào giữa?

Tôi đã thử sử dụng padding-top và vertical-align:middle nhưng không hoạt động (tôi kết thúc với cùng một kết quả).

Tôi cần phải làm gì để thay đổi căn chỉnh văn bản theo chiều dọc?

Answer 1

Tận dụng tối line-height của div giống như height của div, ví dụ:

#UploadSuccess { height: 20px; line-height: 20px; } 

này sẽ chỉ làm việc nếu bạn có một dòng văn bản.

Answer 2

Cố gắng căn giữa văn bản văn bản là một vấn đề phổ biến. Thông thường điều này sẽ không hoạt động trên hộp bình thường, nhưng bạn có thể buộc nó để làm việc với class dọc:

vertical-align: middle; 
display: table-cell; 

Tuy nhiên điều này sẽ không làm việc trong IE7 và thấp hơn.

Nếu bạn chắc chắn văn bản mà bạn muốn hiển thị bạn có thể sử dụng line-height để giả hiệu ứng như thế này:

height: 40px; 
line-height: 40px; /* same as height */ 

cách này hoạt động trình duyệt chéo và có hỗ trợ lên đến IE5.5 Tôi tin. Nếu đây không phải là một lựa chọn, tôi e rằng bạn không may mắn (nó không thể được thực hiện).

Như một lưu ý phụ rằng thông báo lỗi bị ngữ pháp xấu, nên là "Xin chúc mừng! Bạn đã thực hiện thành công nó".

Answer 3

Giúp dễ dàng hơn;)! Cố gắng sử dụng chặn cảnh báo! Điều đó hoạt động tốt với phiên bản Bootstrap mới nhất!

<div class="alert alert-block alert-success" id="UploadSuccess"> 
    <a class="close" data-dismiss="alert">×</a> 
    <strong>Congrats!</strong> You have successfully did it!. 
</div>