Bir div içinde <span> dikey olarak nasıl ortalanır?

156

kodu: Şimdi vermektedir olarakBir div içinde <span> dikey olarak nasıl ortalanır?

<div style=" 
    border:solid 1px gray; 
    cursor:text; 
    width:400px; 
    padding:0px;" 
id="theMainDiv"> 
    <span id="tag1_outer" style=" 
    background:#e2e6f0; 
    padding-right:4px; 
    padding-left:4px; 
    border:solid 1px #9daccc; 
    font:normal 11px arial; 
    color:#3c3c3c 
    ">as</span> 
</div>

, yayılma div sol alt köşesini aynı hizaya olduğunu.

kaynak

2010-12-05 Babiker

159

understanding vertical alignment adresindeki makalemize bakın. Tartışma sonunda ne istediğinizi gerçekleştirmek için birden fazla teknik var.

(Süper-kısa özet: ya set kap üzerinde kabın yüksekliği veya set konumlandırma eşit ve kesinlikle margin-top:-YYYpx ile top:50% çocuğu pozisyon çocuğun satır yüksekliği, olmak YYY yarı bilinen boy .

html, body, #container, #placeholder { height: 100%; } #content, #placeholder { display:inline-block; vertical-align: middle; }

<!doctype html> <html lang="en"> <head> </head> <body> <div id="container"> <span id="content"> Content </span> <span id="placeholder"></span> </div> </body> </html>

: çocuğun)

kaynak

2010-12-05 04:07:21 Phrogz

+33

+1 için görüntülenen nasıl. – Blender

@Blender Heh, orada üçüncü bir seçenek referans olsa da: 'display: table-cell; dikey hizalama: orta '(bir "display: table-row" parent ile birlikte). :) Ama hayır, [asla HTML tablosu elemanlarını mizanpaj için kullanmayı savunacağımdan emin olabilirsin] (http://phrogz.net/CSS/WhyTablesAreBadForLayout.html). – Phrogz

Eğer pedding-top varsa ne olur ??? Ebeveyn yüksekliğine göre sabit bir hayır. Çözünürlüğün, dinamik yükseklik olsa bile çalıştığını düşünüyorum. – kobe

As in a similar question, bir blok elemanının iç yayılma merkezi dikey bir tutucu eleman ile display: inline-block kullanımı

Dikey hizalama sadece inline elements or table cells uygulanan dikey olarak blok merkezleme elemanlarının zaman display:table ebeveyn ile display:inline-block veya display:table-cell ile birlikte kullanılmasıdır.

Kaynaklar: Üst DIV anda

CSS Horizontal and Vertical Centering

kaynak

2012-06-22 18:19:23

Bu çözüm benim için çalıştığı için ebeveynin yüksekliğini bilmiyorum ve aynı zamanda dinamik. Ebeveyn yüksekliğini bilmediğinizde veya dinamik olduğunda "line-height" seçeneği değildir. +1 –

Çözüm, # iç içe aktarılmadığı sürece çalışır –

104

yükseklik demek eklemek

display:table;

eklemek ve alt öğe de üst div için

display:table-cell; 
vertical-align:middle;

kaynak

2012-12-12 09:08:34

Üst görüntüleme görüntülenirse: satır içi satır? Ekstra işaretleme eklemek zorundayım! –

@bhavya_w Hat yüksekliğini denediniz mi? –

Birçok kişi 'table' kullanmaya karşı dikkatli ... neden bu? – rattray

eklemek 50px. Alt satırda satır yüksekliğini ekleyin: 50px; Artık yayındaki metin dikey olarak merkezde olacak. Bu benim için çalıştı.

kaynak

2013-09-09 22:18:45 DTS

tek satır sürede

(bu durumda bir yayılma) çocuk yapın ebeveyn <div> 'ın aynı line-height Daha sonra CSS kurallarını eklemek gerekir

<div class="parent"> 
    <span class="child">Yes mom, I did my homework lol</span> 
</div>

yüksekliği için

Hızlı cevap

.parent { height: 20px; } .child { line-height: 20px; vertical-align: middle; }

Veya bir çocuk seçici ile ben dikey merkez öğeleri için gerekli bu benzer bir sorun koştum bu

benim kendi kullanımına

.parent { height: 20px; } 
.parent > span { line-height: 20px; vertical-align: middle; }

Arka Plan bunu hedefleyebilir mobil menü Aynı çizginin içinde div ve yaylar yaptım.

HTML) bir div birden açıklıklar için

<div class="international"> <span class="intlFlag"> {{flag}} </span> <span class="intlCurrent"> {{country}} </span> <span class="intlButton"> <i class="fa fa-globe"></i> </span> </div>

CSS (seçeneği)

.international { height: 42px; } .international > span { line-height: 42px; }

yılında; bu bir meteor projesi için olduğunu ve bu nedenle satır içi css kullanmıyor unutmayın Bu durumda, sadece bir süreye sahip olsaydım CSS kuralını doğrudan bu aralığa ekleyebilirdim.

CSS (belirli bir yayılma için opsiyon) İşte

.intlFlag { line-height: 42px; }

o * tablo kullanılarak * değil benim için

kaynak

2014-01-31 00:17:16 JGallardo

çalışmayacak – brabertaser19

Bir div içinde <span> dikey olarak nasıl ortalanır?

cevap

İlgili konular