Bu makale, CSS kullanan pratik örneklerle bir div'in doğru hizalanmasını göstermektedir.
- CSS Kullanarak Bir Div Nasıl Sağa Hizalanır?
- “float” Özelliğini Kullanma
- 'Doğru' Özelliği Kullanma
- Esnek Mizanpajı Kullanma
- Izgara Düzenini Kullanma
CSS Kullanarak Bir Div Nasıl Sağa Hizalanır?
Geliştirici, web sitesini daha çekici hale getirecek şekilde her bir div öğesini veya görseli doğru şekilde hizalayabilir. Yüksek esneklikleri nedeniyle, div öğeleri web sayfasında sayfa bölümlerinin tanımlanması, sütunların oluşturulması ve ilgili içeriğin kaydırılması gibi çeşitli şekillerde kullanılabilir.
Divi sağa hizalamak için aşağıdaki yöntemleri izleyin:
Yöntem 1: 'float' Özelliğini Kullanma
HTML dosyasında bir div oluşturun ve ona bir “ sınıfı atayın. sağa hizala ”. Bu sınıf ve div, bu makale boyunca kullanılmıştır.
< div sınıf = 'sağa hizala' >
< P > Bu biraz içerik. < / P >
< / div >
Şimdi, o div sınıfını seçin ' sağa hizala ” ve CSS özelliklerini atayın. Bu özellikler daha iyi görselleştirme için kullanılır:
.sağa hizala {
Sağa çık;
dolgu: 10 piksel;
arka plan- renk : sıcak pembe;
}
Yukarıdaki kodda “ batmadan yüzmek ” özelliği sağa ayarlanır. Div'i web sayfasında doğru yönde yüzer veya hareket ettirir. Dolgu ve arka plan rengi özellikleri “ olarak ayarlanmıştır. 10 piksel ' Ve ' sıcak pembe ' sırasıyla.
Yukarıdaki kod parçacığını derledikten sonra web sayfası şöyle görünür:
Yukarıdaki çıktı, div'in doğru yönde hareket ettiğini onaylar.
Yöntem 2: 'sağ' Özelliği Kullanma
CSS'de div sınıfını seçin ve ' Sağ ” özelliğini 0'a getirir. Seçilen div'in sağ tarafa olan uzaklığının sıfır olmasını sağlar. Ardından, “ konum ' mülk ' mutlak ” div konumunu sabit yapmak için. Sonunda, daha iyi görselleştirme için bazı stil özelliklerini uygulayın:
.sağa hizala{
Sağ: 0 ;
pozisyon: mutlak;
dolgu: 10 piksel;
arka plan- renk : orta mor;
}
Kodu çalıştırdıktan sonra web sayfası şöyle görünür:
Çıktı, div'in artık sağa hizalanmış olduğunu gösterir.
Yöntem 3: Esnek Mizanpajı Kullanma
Flex en verimli yöntemdir ve pencerenin yeniden boyutlandırılması sırasında düzeni korur. Div, CSS kullanılarak sağa hizalanabilir ' Esnek Düzen ' özellikler. Esnek düzen, farklı amaçlar için birçok özellik içerir.
HTML dosyasında bir üst div oluşturun ve bunun içinde iki kardeş div oluşturur. Ayrıca, her div'e benzersiz bir sınıf atayın:
< div sınıf = 'sağa hizala' >< div sınıf = 'Sola hizalı' >
< P >Bu biraz daha içerik .< / P >
< / div >
< div sınıf = 'sağa hizalanmış' >
< h1 >Linuxhint'ten Merhaba < / h1 >
< / div >
< / div >
Şimdi içinde “
ekran: esnek;
savunmak- içerik : arasındaki boşluk;
}
.sağa hizalanmış {
kendini hizala: esnek uç;
dolgu: 10 piksel;
arka plan- renk : orta mor;
}
Yukarıdaki kodda,
- Atamak ' esnek ” ve “space-between” değerlerini “ görüntülemek ' Ve ' haklı içerik ” özellikleri sırasıyla. Bu özellikler div'i esnek hale getirir ve alt div'ler arasında eşit boşluk bırakır.
- “ kendini hizala ” özellik “ olarak ayarlandı esnek uç ”, bu da kabın sağ tarafına hizalanmasına neden olur.
Yukarıdaki kodu çalıştırdıktan sonra web sayfası şöyle görünür:
Çıktı, div'in esnek düzen kullanılarak sağa hizalandığını gösterir.
Yöntem 4: Izgara Düzenini Kullanma
Izgara düzeni, div'i sağa hizalamak için de kullanılabilir. HTML kod yapısı aynı kalır:
.sağa hizala {ekran: ızgara;
grid-template-columns: tekrarla ( 2 , 1fr ) ;
}
.sağa hizalı {
ızgara sütunu başlangıç : 2 ;
dolgu: 10 piksel;
arka plan- renk : deniz mavisi;
}
Kodun açıklaması aşağıda verilmiştir:
- İlk olarak, ana div sınıfını seçin ' .sağa hizala ” ve “ görüntülemek ' mülk ' Kafes ”.
- Ardından, ' kullanarak eşit boyutta iki sütun oluşturun. ızgara-şablon-sütunları ' ayarlanır ' tekrar(2, 1fr) ”.
- Sonunda, çocuk div sınıfını seçin ' .sağa hizalanmış ” ve “ grid-column-start ” özelliğini 2'ye getirin. Bu özellik, öğeyi ikinci sütundan, yani sağ taraftan başlatır.
Yukarıdaki kodu çalıştırdıktan sonra, web sayfası şöyle görünür:
Çıktı, div'in artık “ kullanarak sağa hizalandığını gösterir. Kafes ” düzen özellikleri.
Çözüm
Div'i doğru yönde hizalamak için ' batmadan yüzmek ”, “ Sağ ”, “ esnek düzen ', Ve ' ızgara düzeni ' özellikler. “ batmadan yüzmek ” özellik değeri atayarak sağa ayarlar” 0 piksel ”. İçin ' esnek ” özelliği, ekranı esneyecek şekilde ayarlayın ve “ kendini hizala ' mülk ' esnek uç ”. grid özelliğini kullanarak, iki eşit boyutlu sütun yapın ve alt div'in ikinci sütundan başlamasını sağlayın.