Web Öğelerini CSS Dikey Hizalamayla Nasıl Konumlandırırsınız?

Google arama









Manzara
açıklama






Orman

Lorem ipsum dolor sit amet.






Okyanus

Lorem ipsum dolor sit amet.

bu HTML Kodu yukarıdaki dört öğeyi görüntüleyen basit bir web sayfası oluşturur: bağlantılı metin, resim, gömülü video ve tablo. Tarayıcınızda şöyle görünmelidir:

Metin Dikey Olarak Nasıl Hizalanır

Varsayılan olarak, çoğu metin öğesi (başlıklar,

, ve

Ancak, metin gibi bazı metin öğeleri ve etiket satır içidir. Sonuç olarak, dikey hizalama özelliğini desteklerler. Metni dikey olarak hizalamak için CSS dikey hizalama özelliğine uygun değeri atamanız yeterlidir.

Metinde dikey hizalama üst Değerini kullanma

a {
 dikey hizalama: üst;
}

ekleme CSS kodu yukarıdaki temel HTML belgesinin üst kısmını hizalayacaktır. metni satırdaki en uzun öğenin üst kısmıyla etiketleyin. Aşağıdaki güncellenmiş ekranı üretmek:

Metinde Yüzde Değerini Kullanma

a {
 dikey hizalama: -%50;
}

Yukarıdaki CSS, metin öğesini ana öğenin taban çizgisinin %50 altında olan bir konumda hizalar. Tarayıcınızda aşağıdaki çıktıyı üretir:

Yukarıdaki resimde de görebileceğiniz gibi text elemanı aynı satırda olan resim ve video elemanlarının altında bir yer kaplar. Bu öğeyi taban çizgisinde veya üstünde konumlandırmak için pozitif bir yüzde değeri kullanın.

Metin Üzerinde Uzunluk Değerini Kullanma

a {
 dikey hizalama: 90 piksel;
}

Yukarıdaki kod, metin öğesinin satır taban çizgisini, ana öğenin satır taban çizgisinin 90 piksel üzerinde hizalar. Bu, bir tarayıcıda aşağıdaki çıktıyı üretir:

Görüntüleri Dikey Olarak Hizalama

bu etiketi, CSS dikey hizalama özelliğinin iyi çalıştığı bir satır içi öğedir.

Resimlerde dikey hizalama süper Değerini kullanma

resim {
 dikey hizalama: süper;
}

Yukarıdaki kod, görüntüyü ana öğenin üst simge taban çizgisinde konumlandırır. Bu, aşağıdaki çıktıda görebileceğiniz gibi, taban çizgisinin üzerinde bir konumda olduğu anlamına gelir:

Resimlerde Dikey Hizalama Yüzde Değerini Kullanma

resim {
 dikey hizalama: %25;
}

Yukarıdaki kod, görüntü öğesinin satır taban çizgisini, ana öğenin satır taban çizgisinin %25 üzerinde hizalar. Bu, süper değerin aşağıdaki ayna efektini üretir:

Resimlerde Dikey Hizalama Uzunluğu Değerini Kullanma

resim {
 dikey hizalama: 5 piksel;
}

Yukarıdaki kod, görüntü öğesinin satır taban çizgisini, ana öğenin satır taban çizgisinin 5 piksel üzerinde bir konumda hizalar. Bu, super ve %25 değerlerininkine benzer bir etki üretir:

Videolar ve iframe'ler gibi gömülü medya, satır içi HTML öğeleridir. Bu nedenle, CSS dikey hizalama özelliği onlarla harika çalışır.

Bir Videoda dikey hizalama süper Değerini kullanma

video {
 dikey hizalama: alt;
}

Yukarıdaki kod, videoyu üst öğenin alt simge taban çizgisinde konumlandırır. Bu, aşağıdaki çıktıda görebileceğiniz gibi, taban çizgisinin altında bir konum anlamına gelir:

Bir Videoda Dikey Hizalama Yüzde Değerini Kullanma

video {
 dikey hizalama: -%25;
}

Yukarıdaki kod, video öğesinin taban çizgisini, ana öğenin taban çizgisinin %25 altında olacak şekilde hizalar. Bu, alt değerin aşağıdaki ayna efektini üretir:

Bir Videoda Dikey Hizalama Uzunluğu Değerini Kullanma

video {
 dikey hizalama: -5 piksel;
}

Yukarıdaki kod, görüntü öğesinin satır taban çizgisini, ana öğenin satır taban çizgisinin 5 piksel altındaki bir konumda hizalar. Bu, sub ve -%25 değerleri gibi bir etki yaratır:

Tablodaki Öğeleri Dikey Olarak Hizalama

Bir tablo bir blok öğesi olduğundan, dikey hizalama özelliğini bir tabloyla kullanmak biraz zordur. Ancak

Tablo Verilerinde dikey hizalama üst Değerini kullanma

td {
 yükseklik: 40 piksel;
 dikey hizalama: üst;
}

Yukarıdaki kod, tablodaki her hücreye 40 piksel yükseklik ekler. Daha sonra her hücredeki verileri her satırın üstüne hizalar. Bu, tarayıcıda aşağıdaki çıktıyı üretir:

Tablo Verilerinde dikey hizalama orta Değerini kullanma

td {
 yükseklik: 40 piksel;
 dikey hizalama: orta;
}

Yukarıdaki koddaki dikey hizalama orta değeri, verileri her hücrede dikey olarak ortalar. Tarayıcıda aşağıdaki çıktıyı üretir:

Tablo Verilerinde dikey hizalı alt Değeri kullanma

td {
 yükseklik: 40 piksel;
 dikey hizalama: alt;
}

Yukarıdaki kod, her hücredeki verileri her satırın altına hizalar. Tarayıcıda aşağıdaki çıktıyı üretir:

Artık Web Sayfanızdaki Öğeleri Hizalayabilirsiniz

Artık CSS dikey hizalama özelliğini metin, gömülü medya ve tablo verileri dahil olmak üzere bir dizi farklı satır içi öğeyle kullanabilirsiniz. Genel kural, dikey hizalama özelliğinin yalnızca satır içi ve satır içi blok öğelerinde çalışmasıdır.

Ancak, bu özelliği blok elemanlarda kullanabilirsiniz, önce bunları satır içi veya satır içi blok elemanlara dönüştürmeniz yeterlidir. Dikey hizalamayı metin hizalama gibi diğer hizalama özellikleriyle birleştirebileceğinizi unutmayın.

Yazar hakkında

Kadeisha Kean (52 Makale Yayımlandı)

Kadeisha Kean, Full-Stack Yazılım Geliştirici ve Teknik/Teknoloji Yazarıdır. En karmaşık teknolojik kavramların bazılarını basitleştirme konusunda belirgin bir yeteneğe sahiptir; herhangi bir teknoloji acemi tarafından kolayca anlaşılabilecek malzeme üretmek. Yazmak, ilginç yazılımlar geliştirmek ve dünyayı gezmek (belgeseller aracılığıyla) konusunda tutkulu.

Kadeisha Kean'dan Daha Fazla