Snažím sa nájsť najefektívnejší spôsob zarovnania textu s divom. Vyskúšal som niekoľko vecí a zdá sa, že žiadna z nich nefunguje.
.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>
Vertikálne centrovanie v CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Zhrnutie článku:
Pre prehliadač CSS 2 je možné použiť display:table
/display:table-cell
na centrovanie obsahu.
Ukážka je k dispozícii aj na stránke [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>
Je možné zlúčiť hacky pre staré prehliadače (Internet Explorer 6/7) do štýlov s použitím #
na skrytie štýlov z novších prehliadačov:
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>
Musíte pridať atribút line-height
a tento atribút sa musí zhodovať s výškou div
. Vo vašom prípade:
V tomto prípade:
.center {
height: 309px;
line-height: 309px; /* same as height! */
}
<div class="center">
A single line.
</div>
V skutočnosti by ste pravdepodobne mohli úplne odstrániť atribút height
.
Toto však funguje len pre jeden riadok textu, takže buďte opatrní.
Môžete to urobiť nastavením zobrazenia na 'table-cell' a použitím vertical-align: middle;
:
{
display: table-cell;
vertical-align: middle;
}
Podľa tohto úryvku, ktorý som bez povolenia skopíroval z http://www.w3schools.com/cssref/pr_class_display.asp, to však nepodporujú všetky verzie prehliadača Internet Explorer.
Poznámka: Hodnoty "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group";, "table-row", "table-row-group" a "inherit" nie sú podporované prehliadačom Internet Explorer 7 a staršími. Internet Explorer 8 vyžaduje !DOCTYPE. Internet Explorer 9 podporuje hodnoty.
V nasledujúcej tabuľke sú uvedené povolené hodnoty zobrazenia aj z http://www.w3schools.com/cssref/pr_class_display.asp.