Horizontale de centrage du texte sur l'image via CSS
Considérer le code html suivant:
<div class="image">
<img src="sample.png"/>
<div class="text">
Text of variable length
</div>
</div>
Où:
.image {
position:relative;
text-align:center; //doesn't work as desired :(
}
.text {
position:absolute;
top:30px;
}
Pouvez-vous me dire, si il existe un moyen d'aligner le texte horizontalement dans le centre de la .image
div? Je ne peux pas utiliser le left
de la propriété, puisque la longueur du texte est inconnu et la text-align
propriété ne fonctionne pas pour la .text
div 🙁
Merci.
Vous devez vous connecter pour publier un commentaire.
Essayer le code CSS suivant:
float: left
à.image
et c'est la réponse: jsfiddle.net/chvYuD'abord vous avez besoin pour faire flotter le
.image
élément, afin d'effondrement de son bloc-niveau de descendants à la largeur de l'élément, et ensuite utilisertext-align
sur le.text
élément:JS Fiddle démo.
Ou vous pouvez simplement lui donner un
display: inline-block
, ce qui lui permettra d'avoir son bloc-niveau contenu, et de rester dans le flux de documents:JS Fiddle démo.
Essayez ceci:
order
plutôt que d'utiliser un positionnement absolu hackPeut pas utiliser l'image comme image d'arrière-plan de "l'image" div avec background-image: url('/yourUrl/'); et puis, plutôt que d'avoir votre texte dans son propre div il suffit de le placer dans l'image div et ensuite appliquer text-align: center;