CSS vertical-align özelliği

Tanım ve kullanım

vertical-align özelliği, öğenin dikey hizalama yöntemini ayarlar.

Açıklama

Bu özellik, satır içi öğenin temel hatasının, bu öğenin bulunduğu satırın temel hatasına göre dikey hizalmasını tanımlar. Negatif uzunluk değerleri ve yüzdelik değerler belirtilebilir. Bu, öğenin yükselmesini değil, aşağı inmesini sağlar. Tablo hücrelerinde, bu özellik, hücre çerçevesi içindeki hücre içeriğinin hizalama yöntemini belirler.

Ayrıca bkz:

CSS eğitimi:CSS metin

HTML DOM referans kitabı:verticalAlign özelliği

Örnek

Bir resmin dikey hizalama:

img
  {
  vertical-align:text-top;
  }

Kişisel olarak deneyin

CSS dilbilgisi

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

Özellik değeri

Değer Açıklama
taban Varsayılan. Öğe ebeveyn öğesinin temel hatasına yerleştirilir.
sub Metnin altelini dikey hizalayan.
super Metnin üstelini dikey hizalayan
top Öğenin en üstünü satırın en yüksek öğesinin en üstü ile hizalar
text-top Öğenin en üstünü ebeveyn yazıtipinin en üstü ile hizalar
middle Bu öğeyi ebeveyn öğesinin ortasında yerleştirir.
bottom Öğenin en altını satırın en alt öğesinin en altı ile hizalar.
text-bottom Öğenin altını ebeveyn öğesinin yazıtipinin altı ile hizalar.
length 　
% Bu öğeyi sıralamak için "line-height" özelliğinin yüzdelik değerini kullanın. Negatif değerlerin kullanılmasına izin verilir.
inherit vertical-align özelliğinin değerini ebeveyn öğesinden alması gerektiğini belirtir.

Teknik ayrıntılar

Varsayılan değer: taban
Miras: hayır
Sürüm: CSS1
JavaScript dilbilgisi: object.style.verticalAlign="bottom"

Daha fazla örnek

Dikey hizalanan resim
Bu örnek, metin içinde dikey olarak sıralanan resimleri nasıl gösterir.

Tarayıcı desteği

Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 4.0