1. ev
  2. Soru-cevap
  3. CSS - Dikey olarak hizalama DIV içeriği

CSS - Dikey olarak hizalama DIV içeriği

2009-12-10 30 views
7

Bazı içeriği CSS aracılığıyla dikey olarak ortalamaya çalışıyorum. Benim için hayatımın sebebini anlayamıyorum. Birisi, aşağıdaki HTML'de "test" kelimesinin neden yaptığım önemli değil, her zaman üst sıraya uydurduğunu söyleyebilir mi?CSS - Dikey olarak hizalama DIV içeriği

<html> 
    <head> 
     <title>test</title> 
    </head> 

    <body> 
     <table border='0' cellpadding='0' cellspacing='0'> 
      <tr><td style='height:200px; width:300px; background-color:silver;'> 
       <div style='height:100%; width:100%; background-color:gray; text-align:center;'> 
        <div style='vertical-align:middle;'>test</div> 
       </div> 
      </td></tr> 
     </table> 
    </body> 
</html>

Yardımlarınız için çok teşekkür ederim!

kaynak

2009-12-10 user208662

+4

mı? Masaların düzen için tasarlanmadığını biliyor musun? – BalusC

cevap

0

deneyin gibi, td etiketine valign="middle" ekleyerek:

<td valign="middle" style='height:200px; width:300px; background-color:silver;'>

kaynak

2009-12-10 14:15:44 inkedmn

+0

Muhtemelen bu, çoğu tarayıcıda çalışır, ancak standartlara uygun değildir. Öte yandan, tabloların kullanımı da hoş değil. – Martijn

+2

Soru, 'td' içeriğinin değil, div içeriğinin dikey olarak nasıl hizalanacağını sorar. –

0

deneyin ayar style = 'vertical-align: orta;' ana öğede. Şu anda, gerçekten de içsel dille metni hizalamak için söylüyorsunuz, ancak bunu tüm sayfayı germek ve kapmak için söylemiyorsunuz. Temel olarak, metin kadar küçük bir div öğesiyle bitiyorsunuz.

Bu tür bir CSS sorununu ayıklamak için Firefox'ta Firebug eklentisini kullanabilirsiniz! line-height kullanılarak

kaynak

2009-12-10 14:16:47 rui

-2

deneyin: Dikey fazla uyum sağlamaya 100px

kaynak

2009-12-10 14:17:37

4

hızlı bir yolu, sizin durumunuzda olduğu gibi, yükseklikle çizgi yüksekliği maç için. 

<html> 
    <head> 
     <title>test</title> 
    </head> 
    <body> 
     <table border='0' cellpadding='0' cellspacing='0'> 
       <tr><td style='height:200px; line-height: 200px; width:300px; background-color:silver;'> 
         <div> 
          <div style="text-align: center">test</div> 
         </div> 
       </td></tr> 
     </table> 
    </body> 
</html>

kaynak

2009-12-10 14:17:52

4

vertical-alignTD yılında valign öznitelik sadece CSS yerini tutamaz, ve bu nedenle sadece

Mümkünse (Uygun çözüm DIV ait displayMode değiştirmek değil, hayır ve) display: table-cell elemanları çalıştığından div'e sabit bir yükseklik ayarlamak, sen bu işe yarar margin: auto 0

kaynak

2009-12-10 14:20:02

İlgili konular

 İlgili konular