Centrer le texte verticalement dans

J’ai un élément

avec une hauteur fixe et j’aimerais centrer du texte verticalement dans cet élément.

J’ai essayé de suivre les instructions sur http://phrogz.net/css/vertical-align/index.html . Cependant, cela ne semble pas fonctionner pour moi.

J’ai posté ce que j’essaie sur http://jsfiddle.net/scwebgroup/74Rnq/ . Si je modifie la marge supérieure de HeaderBrand à environ -22px, cela semble bien aller.

Quelqu’un peut-il voir pourquoi la technique décrite dans l’article ne fonctionne pas comme prévu pour moi?

Remarque: La meilleure réponse ici ne fonctionne que si le texte ne se termine pas par une seconde ligne.

Ce:

    This text will be vertically aligned
 
  This longer text will be vertically aligned. Assumenda quinoa cupidatat messenger bag tofu. Commodo sustainable raw denim, lo-fi keytar brunch high life nisi labore 3 wolf moon readymade eiusmod viral. Exercitation velit ex, brooklyn farm-to-table in hoodie id aliquip. Keytar skateboard synth blog minim sed. Nisi do wes anderson seitan, banksy sartorial +1 cliche. Iphone scenester tumblr consequat keffiyeh you probably haven't heard of them, sartorial qui hoodie. Leggings labore cillum freegan put a bird on it tempor duis.

fonctionne dans les navigateurs modernes, que le texte ne couvre qu’une ou plusieurs lignes.

Nous avons également mis à jour le violon à l’ adresse http://jsfiddle.net/74Rnq/135/ Nous ne sums pas sûrs de ce que vous faisiez avec une marge de 625px à gauche alors que la chose en elle-même n’avait que 150px de largeur… et utiliser aussi un peu de rembourrage.

Vous pouvez essayer de définir la hauteur de ligne sur la hauteur du div, comme ceci:

  Hello world!

Voici une autre technique qui semble fonctionner:

 #vertical{ position:absolute; top:50%; left:0; width:100%; }   Hello world!

Je sais que cette méthode ajoute du HTML, mais elle semble fonctionner dans tous les principaux navigateurs (même IE7 +).

Structure HTML de base

  Content

Requiert CSS

 #hold{ height:400px; } div{ display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; vertical-align:middle; } .aligner{ width:0px; height:100%; overflow:hidden; }

Le jsfiddle

Comme indiqué ci-dessous, vous pouvez facilement définir le parent d’un élément de texte sur position: relative et l’élément de texte lui-même sur position: absolute; Utilisez ensuite les propriétés de direction pour vous déplacer dans le texte à l’intérieur du parent. Voir les exemples ci-dessous …

      Centered Text®      Center Method 1
 
  Center Method 2
 
  Center Method 3

Une méthode avec votre configuration actuelle consiste à définir la marge supérieure à -25%

http://jsfiddle.net/ycAta/

La seule raison pour laquelle il semble choquant est que la position est basée sur le haut du texte et qu’il y a un espace nécessaire parce que toutes les lettres n’ont pas la même hauteur.

Comme une correction manuelle -30% semble mieux. : P

Je n’ai pas été en mesure de déterminer la raison pour laquelle le code de l’article que j’ai référencé ne fonctionnerait pas pour moi. Quelques personnes ont proposé des réponses, mais rien ne m’a paru fiable dans tous les navigateurs.

En fin de compte, j’ai décidé de conserver mon texte sur une seule ligne, ce que je n’aime pas autant. Mais j’ai besoin que ma technique soit claire et bien comprise, et qu’elle fonctionne de manière fiable.

J’ai été récemment ravi de constater que Flexbox peut gérer ce problème pour vous. La classe flex-center dans le CSS ci-dessous va centrer le texte de votre div, à la fois verticalement et horizontalement. L’exemple est un peu cassé, je vous recommande donc de redimensionner la fenêtre jusqu’à ce que la bordure div ne soit pas alignée sur le texte.

Pour savoir si vous pouvez utiliser Flexbox en matière de compatibilité, reportez -vous à la section Puis-je utiliser …

Je ne comprends pas bien pourquoi cela fonctionne, et si quelqu’un a plus d’informations sur la machinerie de la boîte flexible, j’apprécierais l’explication.

 .border-boxed { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { /* This is just to make it look pretty */ box-sizing: border-box; background: linear-gradient(135deg, rgba(85,239,203,1) 0%, rgba(30,87,153,1) 0%, rgba(85,239,203,1) 0%, rgba(91,202,255,1) 100%); color: #f7f7f7; font-family: 'Lato', sans-serif; font-weight: 300; font-size: .8rem; /* Expand  to entire viewport height */ height: 100vh; /* Arrange the boxes in a centered, vertical column */ display: flex; flex-direction: column; justify-content: center; align-items: center; } .flex-center { display: flex; justify-content: center; align-items: center; } .box { width: 25%; height: 25%; border: 2px solid #f7f7f7; border-radius: 16px; margin: .5rem; text-transform: uppercase; text-align: center; } .small { height: 8%; }

  Large Box. 
 So big. 
 My god. 
  Smaller Box