Mēģinu atrast visefektīvāko veidu, kā izlīdzināt tekstu ar div. Esmu izmēģinājis vairākas lietas, bet šķiet, ka neviena no tām nedarbojas.
.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ālā centrēšana CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Raksta kopsavilkums:
CSS 2 pārlūkprogrammā satura centrēšanai var izmantot display:table
/display:table-cell
.
Piemērs ir pieejams arī vietnē [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>
Ir iespējams apvienot veco pārlūkprogrammu (Internet Explorer 6/7) hakerus stilos, izmantojot #
, lai paslēptu stilus no jaunākajām pārlūkprogrammām:
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>
Ir jāpievieno atribūts line-height
, un šim atribūtam jāatbilst div
augstumam. Jūsu gadījumā:
Ja vēlaties, lai jūsu gadījumā: <!-- begin snippet: js hide: false console: true babel: false -->: Sīkāk: js hide: false console: true babel: false -->
.center {
height: 309px;
line-height: 309px; /* same as height! */
}
<div class="center">
A single line.
</div>
Patiesībā jūs, iespējams, varētu atcelt atribūtu height
vispār.
Tomēr tas darbojas tikai vienai teksta rindai, tāpēc esiet uzmanīgi.
To var izdarīt, iestatot displejam vērtību 'table-cell' un piemērojot vertical-align: middle;
:
{
display: table-cell;
vertical-align: middle;
}
Tomēr saskaņā ar šo fragmentu, ko es bez atļaujas nokopēju no http://www.w3schools.com/cssref/pr_class_display.asp, to neatbalsta visas Internet Explorer versijas.
Piezīme: Vērtības "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group";, "table-row", "table-row-group" un "inherit" neatbalsta Internet Explorer 7 un agrāka versija. Internet Explorer 8 pieprasa !DOCTYPE. Internet Explorer 9 atbalsta vērtības.
Tālāk tabulā ir norādītas atļautās displeja vērtības arī no http://www.w3schools.com/cssref/pr_class_display.asp.