Próbuję znaleźć najbardziej efektywny sposób na wyrównanie tekstu do div. Próbowałem kilku rzeczy i żadna nie wydaje się działać.
.testimonialText {
position: absolute;
left: 15px;
top: 15px;
width: 150px;
height: 309px;
vertical-align: middle;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
padding: 1em 0 1em 0;
}
<div class="testimonialText">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
Wyśrodkowanie pionowe w CSS.
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Streszczenie artykułu:
W przeglądarce CSS 2 można użyć display:table
/display:table-cell
do wyśrodkowania treści.
Próbka jest również dostępna na stronie [JSFiddle](
):div { border:1px solid green;}
<div style="display: table; height: 400px; overflow: hidden;">
<div style="display: table-cell; vertical-align: middle;">
<div>
everything is vertically centered in modern IE8+ and others.
</div>
</div>
</div>
Możliwe jest łączenie hacków dla starych przeglądarek (Internet Explorer 6/7) w stylach z użyciem #
, aby ukryć style z nowszych przeglądarek:
div { border:1px solid green;}
<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=
"#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div style=" #position: relative; #top: -50%">
everything is vertically centered
</div>
</div>
</div>
Musisz dodać atrybut line-height
i ten atrybut musi być zgodny z wysokością div
. W twoim przypadku:
.center {
height: 309px;
line-height: 309px; /* same as height! */
}
<div class="center">
A single line.
</div>
W rzeczywistości prawdopodobnie mógłbyś całkowicie usunąć atrybut height
.
Działa to jednak tylko dla jednej linii tekstu, więc bądź ostrożny.
Można to zrobić ustawiając wyświetlacz na 'table-cell' i stosując vertical-align: middle;
:
{
display: table-cell;
vertical-align: middle;
}
Nie jest to jednak obsługiwane przez wszystkie wersje Internet Explorera zgodnie z tym fragmentem, który skopiowałem z http://www.w3schools.com/cssref/pr_class_display.asp bez pozwolenia.
Uwaga: Wartości "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", oraz "inherit" nie są obsługiwane przez Internet Explorer 7 i wcześniejsze. Internet Explorer 8 wymaga !DOCTYPE. Internet Explorer 9 obsługuje wartości.
Poniższa tabela przedstawia dozwolone wartości wyświetlania również z http://www.w3schools.com/cssref/pr_class_display.asp.