Wie kann ein Inline-Block in einer Textzeile vertikal ausgerichtet werden?

136

Ich möchte einen Inline-Block erstellen, der eine unbekannte Breite und Höhe annimmt. (Es wird eine Tabelle mit dynamisch generierten Inhalten enthalten). Außerdem sollte der Inline-Block in einer Textzeile platziert werden, z. B. "Mein Text (HIER BLOCKIEREN)". Damit es hübsch aussieht, versuche ich, den Block vertikal in der Linie zu zentrieren . Wenn der Block also so aussieht:

TOP
MIDDLE
BOTTOM

Dann lautet die Textzeile: "Mein Text ([MITTEL])" (mit OBEN und UNTEN über und unter der Zeile)

Folgendes habe ich bisher.

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>

Beispiel

html vertical-alignment css Geoff
quelle
5
Vielleicht erstellen Sie es und veröffentlichen Sie ein Bild von dem, was Sie wollen. Vielleicht bin ich es, aber ich habe keine Ahnung, was Sie fragen.
Brent Friar

Antworten:

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>
Erweitern Sie das Snippet

Getestet und funktioniert in Safari 5 und IE6 +.

Midas
quelle
Ich habe Ihre Lösung für ein ähnliches Problem verwendet, aber ich versuche, ein CSS-Dreieck zu zentrieren. Es ist jedoch nicht vollständig zentriert. Was kann ich Ihrem Rezept hinzufügen, um es vollständig zentriert zu machen?
CodyBugstein
@Imray Position: relativ?
Nino Škopac
23

display: inline-block Ist dein Freund, brauchst du nur alle drei Teile des Konstrukts - vor dem "Block", danach -, um eins zu sein, dann kannst du sie alle vertikal zur Mitte ausrichten:

Arbeitsbeispiel

(es sieht sowieso aus wie dein Bild;))

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
quelle