CSS:Vertically Align của văn bản trong một đoạn Yếu tố để Trung đang
p.event_desc
{
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 14px;
height:35px;
margin: 0px;
}
và HTML:
<p class="event_desc">Lorem ipsum.</p>
Làm thế nào để sắp xếp các văn bản trong các yếu tố p để được tập trung theo chiều dọc?
Hãy thử với -
display: table-cell;
vertical-align: middle;
padding: 10px;
Tôi mới sử dụng HTML CSS. Tôi đã cố gắng hết sức để tìm một câu trả lời không liên quan đến các bảng (vì chúng dường như là xấu ...). Câu trả lời này quá đơn giản để bỏ qua vì vậy tôi đang sử dụng nó. –
@vivekmaharajh Sử dụng thẻ bảng HTML để bố cục không tốt. Tôi không tin rằng nó là xấu để sử dụng bảng trong 'hiển thị' cho những thứ như thế này. – Keavon
Nếu bạn muốn đoạn này kéo dài toàn bộ chiều rộng nhưng nó chỉ chứa một vài từ? –
Bạn có thể sử dụng line-height cho điều đó. Chỉ cần đặt nó lên độ cao chính xác của thẻ p của bạn.
p.event_desc {
line-height:35px;
}
Đây là giải pháp tuyệt vời nhưng không hoạt động nếu bạn muốn căn chỉnh văn bản nhiều dòng ... – Gatekeeper
@Gatekeeper trong trường hợp này chúng ta có thể đơn giản sắp xếp đoạn bên trong một vùng chứa để làm trung tâm theo chiều dọc nó. Chẳng hạn như với phương pháp này: [Căn giữa không xác định] (http://css-tricks.com/centering-in-the-unknown/). –
whow, bạn thực sự thực hiện để tìm hiểu một cái gì đó mới vào chiều thứ sáu ... cool :-D – Gatekeeper
bạn có thể sử dụng
line-height:35px;
Bạn thực sự không nên thiết lập một chiều cao trên đoạn vì nó không tốt cho khả năng tiếp cận (những gì xảy ra nếu người dùng tăng kích thước văn bản v.v.)
Thay vì sử dụng một Div với một Hight và p bên trong nó với line-height đúng:
<div style="height:35px;"><p style="line-height:35px;">text</p></div>
Hãy thử điều này:
display: table-cell;
vertical-align: middle;
padding: 10px;
Bạn đã thử chơi với biên độ? Tôi đã cùng một vấn đề, đó là lý do tại sao tôi ở đây :)
Đây là những gì giúp tôi:
element {
margin: auto;
}
Nếu bạn cần nó để được sắp xếp sang trái hoặc phải và trung tâm, bạn có thể làm:
element {
margin-top: auto;
margin-bottom: auto; /*You can use shorthand*/
}
này sẽ allign nó theo chiều dọc trong phần tử có chứa, và sc ooch nó sang bên phải.
Tôi hy vọng điều này là hữu ích :)
thể dublicate: http://stackoverflow.com/questions/10939288/how-can-i-vertically-center-text-in-a-dynamically-high-div/10939940 –
Sự khác biệt là cái này có chiều cao cố định và không có cha mẹ – Julix