Jak wyrównać blok inline w linii tekstu w pionie?

136

Chcę utworzyć blok inline, który przyjmie nieznaną szerokość i wysokość. (Będzie zawierał tabelę z dynamicznie generowaną zawartością). Ponadto blok inline powinien być umieszczony wewnątrz wiersza tekstu, na przykład „mój tekst (BLOKUJ TUTAJ)”. Aby wyglądało ładnie, staram się, aby blok był wyśrodkowany w pionie w linii . Więc jeśli blok wygląda tak:

TOP
MIDDLE
BOTTOM

Następnie wiersz tekstu będzie brzmiał: „Mój tekst ([ŚRODKOWY])” (z GÓRĄ i DOLEM powyżej i poniżej wiersza)

Oto, co mam do tej pory.

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>

Przykład

html vertical-alignment css

— Geoff
źródło

5

Może to narysuj i opublikuj obraz tego, co chcesz. Może to ja, ale nie mam pojęcia, o co pytasz.

— 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>

Rozwiń fragment

Przetestowane i działa w Safari 5 i IE6 +.

— Midas
źródło

Użyłem Twojego rozwiązania w przypadku podobnego problemu, ale próbuję wyśrodkować trójkąt CSS. Jednak nie jest całkowicie wyśrodkowany. Co mogę dodać do Twojego przepisu, aby był całkowicie wyśrodkowany?

— CodyBugstein,

@Imray Pozycja: względna?

— Nino Škopac

23

display: inline-block jest twoim przyjacielem, potrzebujesz tylko wszystkich trzech części konstrukcji - przed, "blok", po - aby być jednym, wtedy możesz wyrównać je pionowo do środka:

Przykład roboczy

(i tak wygląda na twoje zdjęcie;))

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
źródło