2011-02-10 20 views
15

Tamam, burada bu HTML öğeleri şu anda şu şekilde görünür: Metin görüntü ile merkezli olmak istiyorumDikey merkez Metni ortala

enter image description here

. Görüntü 32x32 pikseldir.

<style> 
div.interface { 
    line-height: 32px; 
    float: left; 
    margin: 10px; 
    width: 450px; 
    font: 14px/27px 'CalibriRegular', Arial, sans-serif; 
    color: #646464; text-shadow: 1px 1px 1px #fff; 
    padding-right: 10px; 
} 
</style> 

<div class="interface"><img src="assets/icons/interface.png" />Filled with fun animations and eye-candy! Complete with Retina graphics.</div> 
+1

onay bu soruyu dışarı http: : //stackoverflow.com/questions/4414034/how-to-vert-align-elements-in-html/4414069#4414069 – JCOC611

+0

@JCOC: İhtiyacım olan şeylere benziyor. Üzgünüm, yeterince aramadım. Cevabınızı buraya kopyalayabilirim, böylece bir cevabı kabul edebilirim. :) –

+0

Hayır, tamam! Kopyalarımı kopyaladım ve durumunuza daha fazla uyması için biraz düzenledim! – JCOC611

cevap

32

örneğin, metin dikey yükseklikle aynı satır yüksekliğini ayarlamak ortalamak için

#text{ line-height: 30px; vertical-align:middle; } 
+0

İkinize de teşekkürler. JCOC'nin cevabını kabul edeceğim çünkü önce doğru cevabı vermişti. Mevcut olduğu anda gelir. Teşekkürler! –

+0

dikey-align: orta; – stephenmurdoch

+5

olmalıdır ve nedir? jk düzenledim. – JCOC611

12

sizin <img /> etiketine style="vertical-align: middle" ekleyin:

İşte benim kod.

vertical-align etiketi ile ilgili tam açıklama için http://phrogz.net/CSS/vertical-align/index.html adresine bakın.

img{ height: 30px; } 
#text{ line-height: 30px; } 

Ve ortasına dikey hizalama ayarlayın::

+0

Cevabınız için teşekkürler! :) –

+0

Bu en iyi cevaptır. –

İlgili konular