Wie wird ein Inline-Block in einer Textzeile vertikal ausgerichtet?

Ich möchte ein inline-block, der auf einige unbekannte Breite und Höhe. (Es wird eine Tabelle drin mit Inhalt dynamisch generiert). Weitere inline-block gesetzt werden sollte, innerhalb einer Textzeile wie "my-text (BLOCK HIER)". Um es hübsch Aussehen, ich bin versuchen, um den block vertikal zentriert in der Zeile. Also wenn der block sieht wie folgt aus:

TOP
MIDDLE
BOTTOM

Dann die Zeile, der text wird gelesen: "Mein text ( [MITTE] )" (mit OBEN und UNTEN Ober-und unterhalb der Linie)

Hier ist, was ich habe, so weit.

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>

Wie wird ein Inline-Block in einer Textzeile vertikal ausgerichtet?

Kommentar zu dem Problem
Vielleicht ziehen Sie es auf und poste ein Bild, was Sie wollen. Vielleicht ist es mir, aber ich habe keine Ahnung, was Sie Fragen. Kommentarautor: Brent Friar

InformationsquelleAutor der Frage Geoff | 2011-05-09

  1. 22

    display: inline-block ist Ihr Freund, Sie müssen nur alle drei Teile des Konstrukts vor, die "blockieren" -, nach -, dann können Sie vertikal so ausrichten, dass Sie alle in die Mitte:

    Beispiel

    (es sieht aus wie dein Bild sowieso ;))

    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>

    InformationsquelleAutor der Antwort clairesuzy

Schreibe einen Kommentar