Bu kılavuz, CSS kullanarak yatay ve dikey hizalama prosedürünü gösterir.
CSS Kullanarak Yatay ve Dikey Hizalama Nasıl Yapılır?
Geliştiriciler, bir web sayfasındaki öğeleri daha organize bir şekilde düzenlemek ve konumlandırmak için 'yatay' ve 'dikey' hizalamayı kullanır. Öğeleri ve içerikleri hizalamada, düğmeleri veya simgeleri konumlandırmada vb. yararlı olabilirler. Daha iyi anlamak için aşağıdaki örnekleri izleyin:
Yatay hizalama
CSS'de, text-align özelliği, metni ana öğesi içinde yatay olarak hizalamak için kullanılır. Daha iyi anlamak için aşağıdaki kod parçacıklarını ziyaret edin:
< vücut >
< div sınıf = 'hesap' >
< div sınıf = 'sola Hizala' > Linuxhint Sola Hizalıdır < / div >
< div sınıf = 'merkeze Hizala' > Linuxhint Merkeze Hizalamadır < / div >
< div sınıf = 'sağ Hizala' > Linuxhint Doğru Hizalamadır < / div >
< / div >
< / vücut >
Yukarıdaki kod parçacığında:
- Birincisi, ebeveyn “ div ” öğesi, “ değerine sahip bir sınıf özniteliğiyle birlikte kullanılır. hesap ”.
- Daha sonra, üç alt öğe yaratıldı ve her bir div'e sınıf özniteliği atandı.
- Sonunda, sınıflara “leftAlign”, “centerAlign” ve “rightAlign” değerleri verilir.
Şimdi, aşağıdaki CSS özelliklerini “
.leftAlign {
görüntülemek : satır içi blok ;
Genişlik : %30 ;
dolgu malzemesi : 20 piksel ;
arka plan rengi : Orman yeşili ;
Metin hizalama : sol ;
}
.centerAlign {
görüntülemek : satır içi blok ;
Genişlik : %30 ;
arka plan rengi : kırmızı ;
dolgu malzemesi : 20 piksel ;
Metin hizalama : merkez ;
}
.rightAlign {
görüntülemek : satır içi blok ;
Genişlik : %30 ;
arka plan rengi : deniz mavisi ;
dolgu malzemesi : 20 piksel ;
Metin hizalama : Sağ ;
}
Yukarıdaki kod bloğunda:
- İlk olarak, üç sınıf da ayrı ayrı seçilir ve ardından CSS özelliklerini uygular ' görüntülemek ”, “ Genişlik ”, “ arka plan rengi ' Ve ' dolgu malzemesi ' onlara. Bu özellikler, görselleştirme amaçlarını geliştirmek için kullanılır.
- Ardından, “ değerleri sol ”, “ merkez ' Ve ' Sağ ”, “ Metin hizalama ” mülkiyet “ sola hizala ”, “ merkez Hizala ', Ve ' sağa Hizala ” sınıfları sırasıyla.
Derleme işleminden sonra, HTML öğeleri şöyle görünür:
Tarayıcının yukarıdaki anlık görüntüsü, öğelerin sol, orta ve sağ konumlarda yatay olarak hizalandığını gösterir.
Dikey hizalama
CSS “ dikey hizalama ” özelliği, seçilen öğeyi “ y ekseni ” üst öğesinin içinde. 'vertical-align' özelliği için olası değerler ' taban çizgisi ”, “ alt ”, “ Süper ”, “ tepe ”, “ metin üstü ”, “ orta ”, “ alt ', Ve ' metin altı ”. Ancak geliştiriciler web sayfası tasarımları oluştururken çoğunlukla “üst”, “orta” ve “alt” değerleri kullanırlar. Seçili HTML öğesini en üst konuma hizalamak için aşağıdaki kod parçacığını ziyaret edin:
< div sınıf = 'saymak' >< img kaynak = 'hiunsplash.jpg' Genişlik = '200 piksel' yükseklik = '200 piksel' >
< açıklık sınıf = 'AltyazıTopAlign' > Bu Metin, görüntünün yanında dikey olarak Yukarı hizalanır < / açıklık >
< / div >
Yukarıdaki kod parçacığında:
- İlk olarak, bir ebeveyn oluşturun ' div ” öğesini seçin ve bir değer atayın “ saymak ” “a sınıf ' bağlanmak.
- Ana kapsayıcının içinde, “
” etiketini ekleyin ve görüntünün yolunu “ kaynak ' bağlanmak.
- Ayrıca, “ değerini sağlayın 200 piksel her ikisine de Genişlik ' Ve ' yükseklik “” nitelikleri
' etiket.
- Ardından, “
” etiketleyin ve ona bir “ sınıfı sağlayın başlıkTopAlign ”. Sonunda, ona sahte veriler sağlayın.
Şimdi, HTML öğelerine stil vermek için CSS özelliklerini ekleyin:
.saymak {Genişlik : uygun içerik ;
görüntülemek : engellemek ;
sol kenar boşluğu : 100 piksel ;
dolgu malzemesi : 10 piksel ;
sınır : 2 piksel sağlam kırmızı ;
}
.captionTopAlign {
dikey
Yukarıdaki kod bloğunda:
- İlk olarak, ebeveyni seçin ' saymak sınıfına girin ve 'fit-content', 'block', '100px', '10px' ve '2px solid red' değerlerini CSS'ye verin ' Genişlik ”, “ görüntülemek ”, “ sol kenar boşluğu ”, “ dolgu malzemesi ' Ve ' sınır ' özellikler. Bu özellikler, üst öğeye stil vermek için kullanılır.
- Ardından, “ başlıkTopAlign ” sınıflandırın ve “ değerini sağlayın tepe ” CSS'ye “ dikey hizalama ' mülk. Bu, HTML öğesinin en üst konuma hizalanmasını sağlar.
Yukarıdaki kod satırlarının yürütülmesinden sonra, web sayfası şöyle görünür:
Yukarıdaki anlık görüntü, seçili HTML öğesinin artık üste hizalanmış olduğunu gösterir. Aynı şekilde eleman orta, alt yönlerde vs. hizalanabilir.
Çözüm
Yatay ve dikey hizalama için, “ Metin hizalama ' Ve ' dikey hizalama Sırasıyla CSS özelliklerinden yararlanılır. “text-align” özelliği, “ değerine izin verir. sol ”, “ Sağ ”, “ merkez ' Ve ' savunmak ”. Öte yandan, “vertical-align” özelliği için olası değerler “ taban çizgisi ”, “ alt ”, “ Süper ”, “ tepe ”, “ metin üstü ”, “ orta ”, “ alt ', Ve ' metin altı ”. Yatay ve dikey hizalama, temiz ve profesyonel web tasarımları oluşturmaya yardımcı olur.