web-dev-qa-db-fra.com

Centrer le texte dans div?

J'ai un div30px high et 500px wide. Cette div peut contenir deux lignes de texte l'une sous l'autre et est stylée (complétée) en conséquence. Mais parfois, il ne contient qu'une seule ligne et je veux qu'elle soit centrée. Est-ce possible?

csspaddingspacing
42
Rifki

Pour centrer horizontalement, utilisez text-align:center. 

Pour centrer verticalement, on ne peut utiliser vertical-align:middle que s'il y a un autre élément dans la même ligne que celle sur laquelle il est aligné.
Regardez-le travailler ici .

Nous utilisons une étendue vide avec une hauteur de 100%, puis mettons le contenu dans l'élément suivant avec un vertical-align: middle.

Il existe d'autres techniques, telles que l'utilisation de tableau-cellule ou l'insertion du contenu dans un élément positionné de manière absolue en haut, en bas, à gauche et à droite, mais toutes présentent des problèmes de compatibilité entre navigateurs.

52
SamGoody

Je crois que vous voulez que le texte soit centré verticalement à l'intérieur de votre div, pas seulement horizontalement. Le seul moyen fiable que je connaisse de le faire est d'utiliser:

display: table-cell;
vertical-align: middle;

sur votre div, et cela fonctionne avec n’importe quel nombre de lignes . Vous pouvez voir un test ici: http://jsfiddle.net/qMtZV/1/

Veillez à vérifier la prise en charge de cette propriété par le navigateur, car elle n’est pas prise en charge - par exemple - dans IE7 ou une version antérieure.

UPDATE 02/10/2016

Cinq ans plus tard, cette technique est toujours valable, mais je pense qu'il existe des solutions meilleures et plus solides à ce problème. Depuis que Flexbox support est bon de nos jours, vous pouvez faire quelque chose dans ce sens: http://codepen.io/michelegera/pen/gPZpqE .

26
michelegera

HTML

<div class="outside">
  <div class="inside">
      <p>Centered Text</p>
  </div>
</div>

CSS

.outside { 
  position: absolute; 
  display: table; 
}

.inside {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}
7
Lars

Si vous avez du texte dans un <div>: 

text-align: center;
vertical-align: middle;
display: table-cell;
5
enigma969

Pour le div parent, utilisez les CSS suivants:

style="display: flex;align-items: center;"
3
Ayan
div {
    height: 256px;
    width: 256px;
    display: table-cell;
    text-align: center;
    line-height: 256px;
}

L'astuce consiste à définir le line-height égal à la height de la div.

3
Henry Zhu

L'ajout de hauteur de ligne aide aussi.

text-align: center;
line-height: 18px; /* for example. */
2
Schw2iizer

Il se peut que je manque quelque chose ici, mais avez-vous essayé:

text-align:center;

??

1
Adam Moss

Vous pouvez essayer d’utiliser dans votre CSS la propriété vertical-align afin de la centrer verticalement

div {  
    vertical-align:middle;  
}

s'il s'agit d'un problème de taille, veuillez noter que 2 lignes de texte et un style de rembourrage ont de grandes chances d'avoir une hauteur supérieure à 30 px. 

Par exemple, si votre taille de police est de 12 px et votre remplissage de div de 5 px, une hauteur de div de ligne de texte sera 5px (padding-top) + 12px + 5 px (padding-bottom) = 22px <30px donc pas de problème

Avec un div de 2 lignes de texte, il sera 5px + 12px * 2 (2 lignes) + 5px = 34px> 30px et votre hauteur de div sera automatiquement modifiée.

Essayez soit d’augmenter votre hauteur de div (peut-être 40px), soit de réduire votre rembourrage.

J'espère que ça va aider 

1
G.K.

Est-ce que cela fonctionnera pour vous?

div { text-align: center; }
0
kaveman

Ajouter au sélecteur contenant le texte

margin:auto;
0
Matoeil

J'ai regardé autour et le

display: table-cell;
vertical-align: middle;

semble être la solution la plus populaire

0
godzilla
display: block;
text-align: center;
0
Dexy86