Bir satır içi bloğu bir metin satırında dikey olarak nasıl hizalayabilirim?

136

Bazı bilinmeyen genişlik ve yükseklik alacak bir satır içi blok oluşturmak istiyorum. (İçinde dinamik olarak oluşturulmuş bir tablo bulunur). Ayrıca, satır içi blok "metnim (BURAYA BLOK)" gibi bir metin satırının içine yerleştirilmelidir. Güzel görünmesi için bloğun dikey olarak ortalanmasını sağlamaya çalışıyorum . Eğer blok şöyle görünüyorsa:

TOP
MIDDLE
BOTTOM

Daha sonra metin satırı şu şekildedir: "Metnim ([ORTA])" (satırın üstünde ve altında TOP ve BOTTOM ile)

İşte şimdiye kadar sahip olduğum şey.

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>

Misal

html vertical-alignment css

— Geoff
kaynak

5

Belki onu çizin ve istediğiniz şeyin bir görüntüsünü gönderin. Belki benim, ama ne istediğini bilmiyorum.

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

Snippet'i genişlet

Safari 5 ve IE6 + 'da test edildi ve çalışıyor.

— Midas
kaynak

Çözümünüzü benzer bir sorun üzerinde kullandım, ancak bir CSS Üçgeni ortalamaya çalışıyorum. Ancak, tamamen ortalanmış değildir. Tamamen ortalamak için tarifinize ne ekleyebilirim?

— CodyBugstein

@Imray Konumu: göreceli?

— Nino Škopac

23

display: inline-block arkadaşın sadece yapının üç parçasına ihtiyacın var - önce, "blok", sonra - bir olmak, o zaman hepsini dikey olarak ortala hizalayabilirsin:

Çalışma Örneği

(yine de resminize benziyor;))

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
kaynak