CSS:pionowo wyrównać tekst w akapicie elementem Bliskiego kodu
p.event_desc
{
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 14px;
height:35px;
margin: 0px;
}
i HTML:
<p class="event_desc">Lorem ipsum.</p>
Jak wyrównać tekst w elemencie p być wyśrodkowany w pionie?
spróbuj -
display: table-cell;
vertical-align: middle;
padding: 10px;
Jestem nowy w HTML CSS. Bardzo się starałem znaleźć odpowiedź, która nie dotyczy tabel (ponieważ podobno są złe ...). Ta odpowiedź była zbyt prosta do zlekceważenia, więc używam jej. –
@vivekmaharajh Używanie znaczników HTML do układu jest złe. Nie sądzę, że używanie takich tabel w "display" jest złe. – Keavon
Co zrobić, jeśli akapit ma obejmować całą szerokość, ale zawiera tylko kilka słów? –
Możesz użyć do tego celu line-height. Po prostu ustaw ją na dokładną wysokość znacznika p.
p.event_desc {
line-height:35px;
}
To jest fajne rozwiązanie, ale nie działa, jeśli chcesz wyrównać tekst wieloliniowy ... – Gatekeeper
@Gatekeeper w takim przypadku możemy po prostu wyrównać akapit wewnątrz kontenera wyśrodkować go pionowo. Tak jak w przypadku tej metody: [Centering in the Unknown] (http://css-tricks.com/centering-in-the-unknown/). –
w którym faktycznie nauczyłeś się czegoś nowego w piątek po południu ... fajnie :-D – Gatekeeper
można użyć
line-height:35px;
Naprawdę nie powinni ustawić wysokość na ustępie jej nie dobre dla dostępności (co dzieje się, gdy użytkownik zwiększa rozmiar tekstu itp.)
Zamiast używać Div ze wysokosc i p wewnątrz niego z prawidłowym line-height:
<div style="height:35px;"><p style="line-height:35px;">text</p></div>
Spróbuj tego:
display: table-cell;
vertical-align: middle;
padding: 10px;
Próbowałeś grać z marginesu? Miałem ten sam problem, dlatego jestem tutaj :)
Oto, co pomogło mi:
element {
margin: auto;
}
Jeśli jest to potrzebne, aby być wyrównany w lewo lub w prawo i centrum, można do:
element {
margin-top: auto;
margin-bottom: auto; /*You can use shorthand*/
}
będzie to allign pionowo w elemencie zawierającym oraz SC ooch to po prawej stronie.
Mam nadzieję, że jest to pomocne :)
Możliwa dublicate: http://stackoverflow.com/questions/10939288/how-can-i-vertically-center-text-in-a-dynamically-high-div/10939940 –
Różnica polega na tym, że ma on stałą wysokość i nie ma rodzica – Julix