Konuyu Değerlendir
  • 0 Oy - 0 Ortalama
  • 1
  • 2
  • 3
  • 4
  • 5
CSS İle Yazıları Dikey Ortalamak
#1
Front end kodlama yaparken özellikle elemanları hizalama problemleri ile sık sık karşılaşırız. Düzgün hizalanan elemanlar insanlar tarafından çok daha kolay algılanır ve  sayfa tasarımının çok daha güzel görünmesini sağlar. Aşağıdaki kod parçacığı içindeki yazıyı sağdan ve soldan yatay olarak ortalar.

Kod:
<div style="border:solid 1px #f41717;width:300px;height:55px;background-color:#fafafa;text-align:center;">CSS ile Yazılar Nasıl Dikey Hizalanır?</div>

Bu kod parçacığı browserda şu şekilde görüntülenir.

[Resim: css-dikey-ortalanmamis-yazi.jpg]

Yazı kutucuğun üstüne yapışmış olarak görünmekte. Ancak biz bu yazının dikey olarak da ortalanmasının istiyoruz. Bunu yapmak için iki tane daha kod eklemeliyiz.

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


Kodları eklediğimiz zaman,


Kod:
<div style="border:solid 1px #f41717;width:300px;height:55px;background-color:#fafafa;text-align:center;display:table-cell;vertical-align:middle;">CSS ile Yazılar Nasıl Dikey Hizalanır?</div>

Sonuç bu şekilde görüntülenir.

[Resim: css-dikey-ortalanmis-yazi.jpg]

Yazılar için dikey hizalama problemi bu şekilde çözülmüş olur.
Bul
Alıntı


Foruma Git:


Bu konuyu görüntüleyen kullanıcı(lar): 1 Ziyaretçi