HTML ve CSS ile bir nesneyi yatay veya dikey olarak ortalamak için farklı yöntemler kullanılabilir.

Css ve Html ile Nesnelerin Yatay-Dikey Ortalama Uygulaması Nasıl Yapılır?

Yatay Ortalama

Yöntem 1: text-align Özelliği

HTML’de, ortalamak istediğiniz öğenin etiketine text-align: center stil özelliğini ekleyerek yatay olarak ortalanabilirsiniz. Örneğin, bir div öğesini ortalamak istediğimizi varsayalım:

html

<div style=”text-align: center;”>

  <p>Ortalanmış metin</p>

</div>

Yöntem 2: margin Özelliği

Yatayda ortalamak için, bir öğeyi belirli bir genişlikte ayarlayıp margin: auto stil özelliğini ekleyebilirsiniz. Örneğin:

html

<div style=”width: 50%; margin: auto;”>

  <p>Ortalanmış metin</p>

</div>

Bu, div öğesinin yatayda ortalanmasını sağlayacaktır.

Dikey Ortalama

Yöntem 1: line-height Özelliği

Bir öğeyi dikey olarak ortalamak için, etiketine line-height stil özelliğini ekleyebilirsiniz. Bu yöntem, öğenin yüksekliğinin bilinmediği durumlarda kullanışlıdır. Örneğin:

html

<div style=”height: 100px; line-height: 100px;”>

  <p>Dikey olarak ortalanmış metin</p>

</div>

Yöntem 2: display Özelliği

Bir öğeyi dikey olarak ortalamak için, etiketine display: flex stil özelliğini ekleyebilirsiniz ve ardından justify-content ve align-items özelliklerini kullanarak dikey hizalamayı ayarlayabilirsiniz. Örneğin:

html

<div style=”display: flex; justify-content: center; align-items: center; height: 100px;”>

  <p>Dikey olarak ortalanmış metin</p>

</div>

Bu, div öğesini dikey olarak ortalamak için kullanılabilir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir