CSS Kullanan Tüm Tarayıcılar İçin Bir Div Öğesini Dikey Olarak Merkezleme

Web geliştirmede, öğenin düzenini düzgün bir şekilde oluşturmak çok önemlidir. Ancak, CSS3 Esnek Kutusu gibi birçok CSS özelliği, web sayfalarının ve HTML öğelerinin düzenini ayarlamak için kullanışlıdır. Esnek Kutu, web sayfalarını ve uygulamaları yinelemeli bir şekilde düzenlemek için kullanılır. Bu Flexbox modu, karmaşık web sayfaları ve uygulamaları için düzenler oluşturmaya yardımcı olur.

Bu gönderi, CSS'yi dikey olarak kullanan tüm tarayıcılar için bir div öğesinin nasıl ortalanacağı konusunda size rehberlik edecek.

CSS Kullanarak div Elemanı Nasıl Hizalanır?

div öğesi, ' display özelliği kullanılarak dikey olarak hizalanabilir. esnek ” CSS ile birlikte “ hizalama öğeleri 'mülk ve' haklı içerik ' Emlak. 'align-items' özelliği, öğeyi dikey olarak hizalar ve 'haklı içerik' özelliği, içeriği yatay olarak hizalar.

Örnek: Bir div Öğesini CSS ile Dikey Olarak Nasıl Ortalarsınız?

HTML'de, önce bir “

” element ve ona sınıfı atayın” ana içerik ”. “

” etiketleri arasına “ ” aşağıdaki niteliklere sahip öğe:

---

---

• “ kaynak ” özniteliği, görüntünün URL'sini belirtmek için kullanılır.
• “ her şey ” özniteliği, yüklenemezse bir görüntünün yerine görüntülenecek bazı metinleri tanımlar.
• “ Genişlik ” özelliği görüntünün genişliğini ayarlamak için kullanılır.
• Ardından, “

  Paragrafı sayfaya gömmek için ” öğesi.

İşte HTML kodu:

< div sınıf = 'ana içerik' >
< img kaynak = '/images/laptop-notepad.jpg' her şey = 'Not defteri ve kalemi olan dizüstü bilgisayar' Genişlik = '300' >
< p > Dizüstü bilgisayar da bilinen taşınabilir bir bilgisayardır. gibi bir dizüstü bilgisayar. p >
div >

CSS'de div'e birkaç stil özelliği belirteceğiz.

Stil “ana içerik” Sınıfı

.ana içerik {
yükseklik: elli % ;
arka plan rengi: #46C2CB;
yazı tipi boyutu: 24 piksel;
dolgu: 10 piksel;
}

Aşağıdaki CSS özellikleri “ ana içerik ' sınıf:

• “ yükseklik ” özelliği,
  kabının yüksekliğini ayarlamak için kullanılır.
• “ arka plan rengi ”, öğenin arka plan rengini tanımlar.
• “ yazı Boyutu ”, öğenin yazı tipi boyutunu belirtir.
• “ dolgu malzemesi ” özelliği, öğenin içeriğinin etrafındaki alanı ayarlar.

Çıktıdan, div öğesinin içeriğinin merkezde olmadığını gözlemleyebilirsiniz:

“ öğesini ortalamaya yardımcı olan CSS özelliklerini uygulamak için ilerleyelim.

” öğesi dikey olarak. Bu özellikleri “ sınıfına ekle ana içerik

öğesine erişmek için kullanılanlar:

Görüntüle: esnek ;
hizalama öğeleri: merkez;

İşte açıklama:

• “ Görüntüle ' Emlak ' esnek ”, div düzenini elemanına göre esnek hale getirmek için kullanılır.
• “ hizalama öğeleri ” CSS özelliği “ olarak ayarlanmıştır. merkez ”div öğelerini dikey olarak hizalayacak.

Çıktı

CSS kullanan tüm tarayıcılar için bir div öğesinin dikey olarak nasıl ortalanacağını öğrendiniz.

Çözüm

Bir div öğesini dikey olarak ortalamak için CSS ' Görüntüle ” özelliği “ ile birlikte kullanılır. esnek ' değer. Bu değer,

kapsayıcısını öğelerine karşı esnek hale getirir. Div öğesini dikey olarak hizalamak için ' hizalama öğeleri ” özelliği ve ona bir “ atayın merkez ' değer. Bu blog, tüm tarayıcılarda div öğelerini dikey olarak ortalamak için CSS'yi nasıl kullanacağınızı gösterdi.