web-dev-qa-db-fra.com

Centrage horizontal du texte sur l'image via CSS

Considérez 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 dire s'il existe un moyen d'aligner horizontalement le texte au centre du .image div? Je ne peux pas utiliser la propriété left, car la longueur du texte est inconnue et la text-align la propriété ne fonctionne pas pour le .text div :(

Je vous remercie.

csshtmlimagealignment
22
Zaur Nasibov

Essayez le CSS suivant:

.image {
    position:relative;
}

.text {
    left: 0;
    position:absolute;
    text-align:center;
    top: 30px;
    width: 100%
}
58
Damir Kotoric

Essaye ça:

.image {

    position:relative;
}

.text {
    width:100%;

    height:100%;
    position: absolute;
    top: 0;
    left: 0px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    display: flex;
}
4
Purnima Sh

Vous devez d'abord faire flotter le .image élément, afin de "réduire" ses descendants au niveau du bloc à la largeur de l'élément, puis d'utiliser text-align sur le .text élément:

.image {
    float: left;
}
.text {
    text-align: center;
}

JS Fiddle .

Ou vous pouvez simplement lui donner un display: inline-block, ce qui lui permettra de contenir son contenu de niveau bloc et de rester dans le flux de documents:

.image {
    display: inline-block;
}
.text {
    text-align: center;
}

JS Fiddle .

3
David Thomas

Ne pouvez-vous pas utiliser l'image comme image d'arrière-plan de la div 'image' en utilisant background-image: url ('/ yourUrl /'); puis plutôt que d'avoir votre texte dans sa propre div, placez-le simplement dans l'image div, puis appliquez text-align: center;

1
CSharpened