Bagaimana cara meratakan blok-sebaris secara vertikal dalam satu baris teks?

136

Saya ingin membuat blok-sebaris yang akan memiliki lebar dan tinggi yang tidak diketahui. (Ini akan memiliki tabel di dalamnya dengan konten yang dihasilkan secara dinamis). Selanjutnya, blok-sebaris harus ditempatkan di dalam baris teks, seperti "teks saya (BLOKIR DI SINI)". Untuk membuatnya terlihat cantik, saya mencoba membuat blok menjadi vertikal di tengah garis . Jadi jika bloknya terlihat seperti ini:

TOP
MIDDLE
BOTTOM

Kemudian baris teks akan berbunyi: "Teks saya ([TENGAH])" (dengan TOP dan BAWAH di atas dan di bawah baris)

Inilah yang saya miliki sejauh ini.

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>

Contoh

html vertical-alignment css Geoff
sumber
5
Mungkin menggambar dan memposting gambar yang Anda inginkan. Mungkin ini aku, tapi aku tidak tahu apa yang kamu tanyakan.
Brent Friar

Jawaban:

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>
Luaskan cuplikan

Diuji dan berfungsi di Safari 5 dan IE6 +.

Midas
sumber
Saya menggunakan solusi Anda pada masalah yang sama, tetapi saya mencoba untuk memusatkan Segitiga CSS. Namun, itu tidak sepenuhnya terpusat. Apa yang bisa saya tambahkan ke resep Anda agar benar-benar terpusat?
CodyBugstein
@Iray Position: relatif?
Nino Škopac
23

display: inline-block adalah teman Anda, Anda hanya memerlukan ketiga bagian konstruksi - sebelum, "blok", setelah - menjadi satu, lalu Anda dapat menyejajarkan semuanya secara vertikal ke tengah:

Contoh Kerja

(sepertinya gambar Anda;))

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
sumber