J'essaie de trouver le moyen le plus efficace d'aligner du texte avec un div. J'ai essayé plusieurs choses, mais aucune ne semble fonctionner.
.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>
Centrage vertical en CSS
[http://www.jakpsatweb.cz/css/css-vertical-center-solution.html][1]
Résumé de l'article :
Pour un navigateur CSS 2, on peut utiliser display:table
/display:table-cell
pour centrer le contenu.
Un exemple est également disponible sur [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>
Il est possible de fusionner les hacks pour les anciens navigateurs (Internet Explorer 6/7) dans les styles en utilisant #
pour cacher les styles des navigateurs plus récents :
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>
[1] : http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Vous devez ajouter l'attribut line-height
et cet attribut doit correspondre à la hauteur de la div
. Dans votre cas :
.center {
height: 309px;
line-height: 309px; /* same as height! */
}
<div class="center">
A single line.
</div>
En fait, vous pourriez probablement supprimer complètement l'attribut height
.
Cela ne fonctionne que pour une ligne de texte cependant, alors soyez prudent.
Vous pouvez le faire en définissant l'affichage sur "table-cell" et en appliquant un "vertical-align : middle;`" :
{
display: table-cell;
vertical-align: middle;
}
Cette méthode n'est toutefois pas prise en charge par toutes les versions d'Internet Explorer, selon cet extrait que j'ai copié sans autorisation sur [http://www.w3schools.com/cssref/pr_class_display.asp][1].
**Remarque : les valeurs " inline-table ", " table ", " table-caption ", " table-cell ", " table-column ", " table-column-group ", " table-row ", " table-row-group " et " inherit " ne sont pas prises en charge par Internet Explorer 7 et les versions antérieures. Internet Explorer 8 requiert un !DOCTYPE. Internet Explorer 9 prend en charge les valeurs.
Le tableau suivant montre les valeurs d'affichage autorisées, également tirées de [http://www.w3schools.com/cssref/pr_class_display.asp][2].
![Entrez la description de l'image ici][3]
[1] : http://www.w3schools.com/cssref/pr_class_display.asp/%22w3%20schools%22 [2] : http://www.w3schools.com/cssref/pr_class_display.asp/%22w3schools%22 [3] : http://i.stack.imgur.com/c7nnr.png