Comment aligner verticalement un bloc en ligne dans une ligne de texte?

136

Je veux créer un bloc en ligne qui prendra une largeur et une hauteur inconnues. (Il y aura une table à l'intérieur avec un contenu généré dynamiquement). De plus, le bloc en ligne doit être placé à l'intérieur d'une ligne de texte, telle que "mon texte (BLOQUEZ ICI)". Pour le rendre joli, j'essaie de faire en sorte que le bloc soit centré verticalement dans la ligne . Donc, si le bloc ressemble à ceci:

TOP
MIDDLE
BOTTOM

Ensuite, la ligne de texte se lit comme suit: "Mon texte ([MIDDLE])" (avec TOP et BOTTOM au-dessus et en dessous de la ligne)

Voici ce que j'ai jusqu'ici.

CSS

.example {
  background-color: #0A0;
  display: inline-block;
  margin: 2px;
  padding: 2px;
  position: relative;
  text-align: center;
}

HTML

<div class="example">TOP<br />MIDDLE<br />BOTTOM</div>

Exemple

html vertical-alignment css

— Geoff
source

5

Peut-être rédigez-le et affichez une image de ce que vous voulez. C'est peut-être moi, mais je n'ai aucune idée de ce que vous demandez.

— Brent Friar

168

code {
    background: black;
    color: white;
    display: inline-block;
    vertical-align: middle;
}

<p>Some text <code>A<br />B<br />C<br />D</code> continues afterward.</p>

Développer l'extrait

Testé et fonctionne dans Safari 5 et IE6 +.

— Midas
source

J'ai utilisé votre solution sur un problème similaire, mais j'essaye de centrer un triangle CSS. Cependant, ce n'est pas totalement centré. Que puis-je ajouter à votre recette pour la rendre totalement centrée?

— CodyBugstein

@Imray Position: relative?

— Nino Škopac

23

display: inline-block est votre ami, vous avez juste besoin des trois parties de la construction - avant, le "bloc", après - pour en être une, alors vous pouvez toutes les aligner verticalement au milieu:

Exemple de travail

(ça ressemble quand même à ta photo;))

CSS:

p, div {
  display: inline-block; 
  vertical-align: middle;
}
p, div {
  display: inline !ie7; /* hack for IE7 and below */
}

table {
  background: #000; 
  color: #fff; 
  font-size: 16px; 
  font-weight: bold; margin: 0 10px;
}

td {
  padding: 5px; 
  text-align: center;
}

HTML:

<p>some text</p> 
<div>
  <table summary="">
  <tr><td>A</td></tr>
  <tr><td>B</td></tr>
  <tr><td>C</td></tr>
  <tr><td>D</td></tr>
  </table>
</div> 
<p>continues afterwards</p>

— clairesuzy
source