Centrer le texte aligné à gauche sur l'image - html, css

Je veux du texte sur une image qui est toujours centrée. Le code suivant y parvient. Cependant, je souhaite également que le texte lui-même soit aligné à gauche, par opposition à celui centré, et que je souhaite spécifier une largeur de 100 pixels pour le texte afin que les mots s’enroulent. Comment puis-je atteindre cet objectif?

<div id="typewritter-text">
<span id="typewritter">Lorem Ipsum</span>
</div>

#typewritter-text {
color: white;
position: absolute;
left: -65px;
position:absolute;
text-align:center;
top: 400px;
width: 100%;
}

Réponses:

J'ai fait un violon pour démontrer la solution:

http://jsfiddle.net/Ar14/gg076ew0/1/

#typewritter-text {
top: 0;
left: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
position: absolute;
}

C'est le CSS que vous voulez. Assurez-vous que le conteneur parent a également une position relative car vous voulez qu'il soit positionné de manière absolue par rapport au parent et non à la page entière.

Vous définissez text-align:center; dans votre CSS, qui définit le texte aligné sur le centre. Essayez de changer cela en text-align: left;.

Pour définir la largeur maximale de la zone de texte sur 100 pixels, vous devriez probablement procéder comme suit: width: 100px; au lieu de width:100%;.