Jeg prøver å finne den mest effektive måten å justere tekst med en div. Jeg har prøvd noen få ting, og ingen ser ut til å fungere.
.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>
Vertikal sentrering i CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Sammendrag av artikkelen:
For en CSS 2-nettleser kan man bruke display:table
/display:table-cell
for å sentrere innhold.
Et eksempel er også tilgjengelig på [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>
Det er mulig å slå sammen hacks for gamle nettlesere (Internet Explorer 6/7) i stiler ved å bruke #
for å skjule stiler fra nyere nettlesere:
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>
Du må legge til attributtet line-height
, og dette attributtet må samsvare med høyden på div
. I ditt tilfelle:
.center {
height: 309px;
line-height: 309px; /* same as height! */
}
<div class="center">
A single line.
</div>
Faktisk kan du sannsynligvis fjerne height
-attributtet helt.
Dette fungerer imidlertid bare for en linje med tekst, så vær forsiktig.
Du kan gjøre dette ved å sette visningen til 'table-cell' og bruke en vertical-align: middle;
:
{
display: table-cell;
vertical-align: middle;
}
Dette støttes imidlertid ikke av alle versjoner av Internet Explorer i henhold til dette utdraget jeg kopierte fra http://www.w3schools.com/cssref/pr_class_display.asp uten tillatelse.
Bemerk: Verdiene "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group"table-row, table-row-group og inherit støttes ikke av Internet Explorer 7 og tidligere. Internet Explorer 8 krever en !DOCTYPE. Internet Explorer 9 støtter verdiene.
Følgende tabell viser også de tillatte visningsverdiene fra http://www.w3schools.com/cssref/pr_class_display.asp.
Skriv inn bildebeskrivelse her]3.