Css ile Çok Satırlı Yazıları Dikey Ortalama
Css kullanarak eğer tek kelimelik ya da tek satırlık bir yazınız varsa bunu dikey olarak ortalamak çok zor olmayabilir ancak metniniz birden fazla satıra sahipse, her browser'da sorunsuz çalışan, dikey olarak hizalanmış bir görünüm elde etmek zordur.
Yandaki resimde görülen konuşma balonu örneğini ele alalım. Aşağıdaki gibi bir html kodumuzun olduğunu varsayalım :
- <div class="area">
- <div class="bubble">
- <p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p>
- </div>
- </div>
Şimdi ise css'in table gösterimi ile dikey ortalamamızı yapıyoruz:
- .area { width: 300px; height: 300px; background: url(../images/abe-bg.png) no-repeat; position: relative; }
- .bubble { position: absolute; left: 93px; top: 21px; width: 135px; height: 84px; display: table; }
- .bubble p { display: table-cell; vertical-align: middle; text-align: center; }
Ie8 css table için dikey ortalama özelliğini destekliyor ancak, ie7 ve daha eski tarayıcılar bu özelliği desteklemiyor. Bu işlemin nasıl yapılacağını ve uygulamanın demosunu makalenin orjinal kaynağında bulabilirsiniz.
.png,_ANDesc=img,)
Yeni yorum gönder