Centrer une étiquette

Question

J'ai un div avec du texte à l'intérieur et une position absolue. Je peux définir la gauche ou la droite, mais y a-t-il un moyen de définir le centre, de sorte que le texte de Div se développe dans les deux directions. Jusqu'à présent, je ne pouvais penser à créer longtemps div et centrer le texte à l'intérieur.

Answer 1

Si votre div est positionné de manière absolue, vous pouvez simplement définir sa propriété left afin qu'elle soit centrée.

Exemple:

HTML:

<div class="outer"> 
    <div class="inner">Some text...</div> 
</div> 

CSS:

.outer { 
    position: relative; 
    width: 900px; 
} 
.inner { 
    position: absolute; 
    width: 500px; 
    top: 0; 
    left: 200px; 
} 

---

Si vous ne connaissez pas la largeur de l'élément interne, vous Je dois compter sur javascript.

Voici un exemple en utilisant jQuery:

var $el = $('.inner'); 

$el.css('left', 
    ($el.parent().width() - $el.width())/2 
); 

et voici le violon: http://jsfiddle.net/aa93G/. Jouez avec le texte à l'intérieur .inner, et vous verrez que le texte reste centré.

Answer 2

• Pour centraliser le texte interne et les éléments en ligne, utilisez text-align: center dans l'élément parent.
• Si vous traitez des éléments de bloc, vous devez utiliser margin: auto dans l'élément lui-même. mais vous devez d'abord définir une largeur pour l'élément, sinon il occupera toute la largeur du parent.