SORU
14 Ocak 2012, CUMARTESİ


Nasıl metin dikey olarak ortala CSS ile div içinde?

Metin içeren bir div etiketi var, ve bu div içeriğini dikey olarak ortala istiyorum.

İşte benim stilim div:

#box
{
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}
<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Bunu yapmak için en iyi yolu nedir?

CEVAP
14 Ocak 2012, CUMARTESİ


Bu temel yaklaşım deneyebilirsiniz:

#box {
  height: 90px;
  line-height: 90px;
}

Demo

Çalışır, tek satırlık bir metin kutusu içeren bir unsur olarak aynı yükseklik için satır yüksekliği ayarlayın çünkü ama, sadece.


Daha çok yönlü bir yaklaşım

Ve işte metin dikey olarak hizalamak için başka bir yol, bu çözüm, tek bir metin satırı ve birden fazla satır için çalışacak, ama yine de sabit yükseklikte bir kap gerektirir:

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

CSS sadece boyutları <div> dikey merkezine hizalar <span> ayar <div>'nin line-height eşit yüksekliği ve yapım <span> sıralı blok vertical-align: middle. Sonra içeriğini doğal olarak bloğun içine akar böylece line-height normale döndü <span> için ayarlar.

div {
  width: 250px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;      
}

Demo


Taklit tablosu görüntüleme

Ve burada eski çalışmayabilir başka bir seçenek browsers that don't support display: table and display: table-cell (temelde bu demektir Internet Explorer 7). HTML, ikinci örnekte olduğu gibi aynı

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

Kullanıyoruz '' tablo dikey hizalama desteği beri davranış görüntüleme: benzetin . CSS

div {
  display: table;
  width: 250px;
  height: 100px;
  text-align: center;
}

span {
  display: table-cell;
  vertical-align: middle;
}

Demo


Mutlak konumlandırma kullanarak

Bu teknik konumlandırılmış bir öğe ayarı üst, alt ve 0 Sağ Sol kullanır. article on Smashing Magazine bir daha ayrıntılı bir şekilde açıklanmıştır.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • booba1234

    booba1234

    22 Temmuz 2006
  • How It Should Have Ended

    How It Shoul

    5 Mart 2007
  • TopOfTheTech

    TopOfTheTech

    5 NİSAN 2010