CSS Dikey Hizalama: İpuçları ve Teknikler

CSS ortalıkta olduğu sürece, öğeleri dikey olarak ortalamak birçok ön uç web geliştiricisi için her zaman sinir bozucu bir görev olmuştur.

text-alignÖzelliği kullanarak kolayca elde edilebilecek yatay hizalamaların aksine , dikey hizalamaların uygulanması genellikle çok daha zordur.

Günümüzde, metni veya CSS kullanarak herhangi bir öğeyi dikey olarak ortalamak basit bir iştir. Bu makalede çeşitli CSS dikey hizalama teknikleri gösterilmektedir: Bir Flexbox kullanma, konumlandırma + dönüştürme kullanma, dikey dolgu kullanma ve satır yüksekliği kullanma.

Flex kullanarak CSS Dikey Hizalama

CSS3 spesifikasyonu ile sunulan display: flexözellik / değer, şamandıralar veya konumlandırma kullanmadan esnek duyarlı düzen yapıları tasarlamayı kolaylaştırır.

İle birlikte display:flex, tablo hücrelerinden kolaylıkla hizalama şey ile unsurlarını satır içi olabilir align-items, align-selfve justify-contentözellikleri.

Bu tekniğin demosunu görüntülemek için buraya tıklayın . HTML kısmı için sadece basit bir kapsayıcıya ihtiyacımız var, bu yüzden aşağıdakileri düşünelim:

<div class="align-vertically">
    Dikey olarak ortalandım! 
</div>

Metni dikey olarak ortalamak için kullanılan CSS kodu:

.align-vertically {
  background: #13b5ea;
  color: #fff;
  display: flex;
  align-items: center;
  height: 200px;
}

Nasıl çalıştığını görelim:

• CSS kodunun 4. satırında, ekranı flexkap için esnek kutu düzenini etkinleştiren olarak tanımlarım .
• Çizgi 5, metni align-itemsCSS özelliğini kullanarak ve centerdeğer olarak flexbox’ta dikey olarak ortalar .

Bu teknik çok güvenilirdir ve duyarlı bir web tasarımı bağlamında iyi çalışır . Ne yazık ki, CSS Flexbox IE9 ve önceki sürümleri tarafından desteklenmemektedir.

Transform Özelliğini Kullanarak CSS Dikey Hizalama

Bu, ilginç bir tekniktir, çünkü herhangi bir HTML öğesini dikey olarak ortalamanıza izin verir: Paragraflar, resimler vb.

Çalışmasını sağlamak için HTML kodumuzda iki kapsayıcıya ihtiyacımız var: Aşağıdaki örneklerde divüst öğe olarak a ve dikey olarak hizalamak istediğim metni içeren bir paragraf kullanılıyor:

<div class="vertical-align">
  <p>Ortalandım!</p>
</div>

İşte paragrafımızı dikey (ve yatay olarak) ortalayacak ilgili CSS kodu:

.vertical-align { 
  color: #fff;
  height: 200px;
  position: relative;
  background: #13b5ea; 
}

.vertical-align p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Çalıştırmak için kullanılan özelliklere bir göz atalım ( Bu tekniği çalışırken görmek istiyorsanız demoya göz atabilirsiniz ):

• 
.vertical-alignSınıf sabit 200px yüksekliği tanımlar. Bu, sitenizin gereksinimlerine uyacak şekilde değiştirilebilir. Ayrıca, tanımlanmış position: relativealt öğenin görüntüleme sorunlarını önlemek için kullanılan , kullanımına dikkat edin position: absolute.
• Alt öğe ( .vertical-align p) top: 50%;, paragrafı üst öğenin üst kısmının% 50’sinde görüntülemek için a öğesini kullanır . Bu tek başına içeriği dikey olarak ortalamaz.
• transformHat 13 üzerinde mülkiyet hem yarattığı ekstra alan telafi etmek için kullanılır topve left.

WebDevBlog’un yayın başlığını ve meta dikey olarak merkezlenmiş yapmak için kullandım. Basit, hızlı ve verimli bir tekniktir. Tek sorun, transformözelliğin IE8 ve önceki sürümlerinde desteklenmemesidir.

Dikey Dolgu Kullanarak CSS Dikey Hizalama

Dolgu kullanarak ortalanmış bir metin oluşturabiliriz. Bu teknik, örneğin düğmeler ve gezinme menüsü öğeleri oluştururken çok yaygın olarak kullanılmaktadır.

Aşağıdaki basit HTML parçasını düşünün veya demoya bir göz atın .

<div class="vertical-align">
  I look centered!
</div>

İşte kullandığımız CSS sınıfı:

.vertical-align{
  background: #13b5ea;
  color: #fff;
  border-radius: 5px;
  width: 200px;
  text-align: center;
  padding: 2rem 0;
}

Gördüğünüz gibi, 2 remlik bir üst ve alt dolgu belirledim (On line 7). Bu, öğenin üstünde ve altında, dikey olarak ortalanacak alan yaratır.

Satır Yüksekliğini Kullanarak CSS Dikey Hizalama

Bu teknik, yukarıda açıklanan dolgu tekniğine çok benzer. Tek fark, line-heightelemanımızı dikey olarak ortalamak için CSS özelliğini kullanacağımızdır.

Önceki örnekte kullandığımız HTML kodunu kullanalım. Daha önce olduğu gibi, bu tekniği test etmeniz ve denemeniz için bir demo var.

<div class="vertical-align">
  Ortalanmışım! 
</div>

CSS kodu, önceki örnekte kullanılan koddan çok farklı değil:

.vertical-align{
  background: #13b5ea;
  color: #fff;
  border-radius: 5px;
  width: 200px;
  text-align: center;
  line-height: 4rem;
}

Bu teknikte, line-heightbir düğmenin metnini dikey olarak ortalamak için CSS özelliğini kullandık .

Bu teknik düğmeler veya gezinme öğeleriyle iyi çalışsa da, çok dikkatli bir şekilde kullanmanız gerekir: Herhangi bir nedenle metniniz birden çok satıra giderse, her şey tamamen kırık görünecektir. Bu yüzden metni bir düğme üzerinde dikey olarak ortalarken bunun yerine dolgu tekniğini kullanma eğilimindeyim.

CSS Dikey Hizalama Ekranı kullanma: tablo hücresi

Bu teknik 2 kap gerektirir ve display: tablebir ana eleman ve display: table-cellonun çocuğu üzerinde kullanır .

Bu, metin ve içeriğin bir HTML tablo hücresine nasıl hizalandığını çoğaltmanıza olanak tanır. Aşağıdaki HTML kodunu ele alalım:

<div id="parent">
  <div id="child">Ortalandım</div>
</div>

İlgili CSS :

#parent {
  background: #13b5ea;
  color: #fff;
  height: 200px;
  display: table;
}

#child {
  display: table-cell;
  vertical-align: middle;
 }

Burada karmaşık bir şey yok: Üst öğeye bir tableekran atanır ve alt öğesi kullanılır display: table-cell. Alt öğenin içeriği, vertical-align: middleözellik kullanılarak dikey olarak ortalanır .

İçeriği yatay olarak hizalamanız gerekiyorsa, yalnızca text-align: centerüst öğede kullanmanız gerekir .

Bu teknik tüm modern tarayıcılarda harika çalışır. Lütfen unutmayın display: tableve display: table-cellIE7 ve önceki sürümlerde desteklenmez.

Sıkça Sorulan Sorular

---

Bir öğeyi dikey hizalama kullanarak dikey olarak ortalayabilir miyim?

Yaygın bir yanlış anlama, vertical-align: middleCSS özelliğinin bir öğeyi üst öğesinde dikey olarak ortalamak için kullanılabilmesidir. İken vertical-align: middledikey bir tablo hücresinin içeriğini hizalamak için kullanılabilir, diğer unsurların üzerinde çalışmak olmaz.

Öğeleri CSS’de Dikey Olarak Nasıl Ortalıyorsunuz?

Dikey olarak hizalamak istediğiniz öğenin türüne bağlı olarak, makalede ayrıntılı olarak açıklandığı gibi bir esnek kutu, dönüştürmeler, dikey dolgu veya satır yüksekliği kullanabilirsiniz.