css ile yazıyı ortalama

CSS ile Yazıyı Dikey Ortalama

Bu yazımda size CSS ile yazıyı dikey ortalama işleminin yapılışını anlatacağım. Normalde tek satırlık metinlerde ortalama işlemi yaparken line-height kullanıyoruz hepimiz fakat bu yazı 2 ve üzeri satır sayısına ulaştığında bu işlemi kullanamıyoruz.

Gelelim Kod Yapısına;

#paragraf id’li bir div açtık ve bunun içine p tagı açıyoruz. p tagının içini istediğiniz yazı ile doldurun.

#paragraf‘ın css kodlarında display: table; yazarak div‘imizi tabloya çeviriyoruz.
Daha sonra #paragraf‘ın içindeki p tagına display: table-cell; kodunu ekledikten sonra dikey ortalama işlemini yapmak için vertical-align: middle; kodlarını yazıyoruz.

Ve Sonuç:

Sevgiler.
Bir önceki yazımız olan WordPress Emlak Teması 2 başlıklı makalemizi de okumanızı öneririz.

Merhaba! Ben Burak. 2016 yılında Karadeniz Teknik Üniversitesi Harita Mühendisliği Bölümü’nden mezun oldum. Lise yıllarında HTML & CSS‘e, Üniversite yıllarında WordPress ve Matlab‘e adım attım. Lisans tezimi Matlab üzerinden program yazarak teslim ettim. Çeşitli projeler için WordPress tabanlı yazılımlar geliştirdim.

7 Yorum

  • Adem Avşar

    25 Şubat 2023 at 12:48

    Böyle bir kod daha önce görmemiştim.
    Eğer flexbox yapısı ile çalışıyorsanız #paragraf {display: flex;} kullanabilirsiniz.
    table kullanınca paragrafın background-color’u dışarı taşıyor.
    eğer böyle bir hatayla karşılaşır iseniz deneyin.

    Yanıtla
    • Burak Şahin

      20 Haziran 2023 at 14:14

      Haklısınız hocam, bu kod 10 yıl önceki teknolojiye göre yazılmıştı. Şimdilerde display: flex; herşeyi çözüyor 🙂

      Yanıtla
  • Salih Toy

    3 Kasım 2013 at 03:12

    Tam kısa ve öz olmuş. Aslında line-height özelliğinin yanında da dik ortalamak için float:left de kullanıyoruz bazen. Ama bu soldan hiza alıyor. Yine de dik bir görüntü veriyor diyebiliriz. Neyse iyi bir anlatım olmus, arşiv’e aldım, teşekkürler 🙂

    Yanıtla

Bir yanıt yazın

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.