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

Question

Je veux créer un inline-block que certaines inconnues de largeur et de hauteur. (Il va avoir une table à l'intérieur avec du contenu généré dynamiquement). De plus, le inline-block doit être placé à l'intérieur d'une ligne de texte, tel que "mon texte (BLOC)". Pour le faire paraître jolie, je suis en train de faire le bloc sera centrée verticalement dans la ligne. Donc, si le bloc ressemble à ceci:

TOP
MIDDLE
BOTTOM

Puis la ligne de texte de lecture: "Mon texte ( [MILIEU] )" (avec le HAUT et le BAS au-dessus et au-dessous de la ligne)

Voici ce que j'ai jusqu'à présent.

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>

Answer 1

 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>
 

Testé et fonctionne dans Safari 5 et IE6 +.

Answer 2

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

Exemple de travail

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

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>