Ik probeer de meest effectieve manier te vinden om tekst uit te lijnen met een div. Ik heb een paar dingen geprobeerd maar geen enkele lijkt te werken.
.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>
Verticaal Centreren in CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Samenvatting artikel:
Voor een CSS 2 browser, kan men display:table
/display:table-cell
gebruiken om inhoud te centreren.
Een voorbeeld is ook beschikbaar op [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>
Het is mogelijk om hacks voor oude browsers (Internet Explorer 6/7) samen te voegen in stijlen met gebruik van #
om stijlen te verbergen voor nieuwere browsers:
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>
Je moet het line-height
attribuut toevoegen en dat attribuut moet overeenkomen met de hoogte van de div
. In jouw geval:
.center {
height: 309px;
line-height: 309px; /* same as height! */
}
<div class="center">
A single line.
</div>
In feite zou je waarschijnlijk het height
attribuut helemaal kunnen verwijderen.
Dit werkt echter alleen voor één regel tekst, dus wees voorzichtig.
U kunt dit doen door de weergave in te stellen op 'table-cell' en een vertical-align: middle;
toe te passen:
{
display: table-cell;
vertical-align: middle;
}
Dit wordt echter niet door alle versies van Internet Explorer ondersteund volgens dit uittreksel dat ik zonder toestemming heb gekopieerd van http://www.w3schools.com/cssref/pr_class_display.asp.
Noot:De waarden "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", en "inherit" worden niet ondersteund door Internet Explorer 7 en eerder. Internet Explorer 8 vereist een !DOCTYPE. Internet Explorer 9 ondersteunt de waarden.
De volgende tabel toont de toegestane weergavewaarden, ook van http://www.w3schools.com/cssref/pr_class_display.asp.