Bu makale, bir esnek kutu içindeki metnin dikey olarak nasıl hizalanacağını gösterir:
Yöntem 1: 'align-item' Özelliğini Kullanma
Metni dikey olarak hizalamak için kullanıcılar ' hizalama öğesi ” CSS tarafından sağlanan özellik. Öğelerin flexbox içindeki hizalamalarını ayarlamalarına yardımcı olur. Olası dikey hizalama konumları “ tepe ”, orta ', veya ' alt ' taraf.
Elemanları bu yönlerde hizalamak için pratik gösterimler aşağıda belirtilmiştir:
Örnek 1: En Üst Konum
Esnek kutunun içindeki metni en üst konuma hizalamak için, ' esnek başlangıç ” değeri “ hizalama öğeleri ' mülk. Bu özellik, esnek olarak görüntülenecek olan ana div'e atanır. Diyelim ki, ' sınıfına sahip bir div dikey ” HTML dosyasında oluşturulur. Ardından, CSS dosyasında o sınıfı seçin ve aşağıdaki özellikleri atayın:
.dikey {
renk : beyaz ;
yükseklik : 150 piksel ;
görüntülemek : esnek ;
sol dolgu : 20 piksel ;
hizalama öğeleri : esnek başlangıç ;
arka plan rengi : Orman yeşili ;
}
- İlk olarak, CSS'nin color, background-color ve height özelliklerini kullanarak div'e temel stil ve hizalama verilir.
- 'Ekran' özelliği, onu bir esnek kutu yapmak için 'esnek' olarak ayarlanmıştır.
- Son olarak, metni esnek kutunun başlangıcında görüntülemek için 'align-items' özelliğini 'flex-start' olarak ayarlayın.
Yukarıdaki kodu çalıştırdıktan sonra, web sayfası şöyle görünür:
Çıktı, metnin artık esnek kutu içinde en üst konumda hizalandığını gösterir.
Örnek 2: Orta Konum
Metni orta konumda dikey olarak hizalamak için “ merkez ' CSS değeri ' hizalama öğeleri ' mülk:
.dikey {renk : beyaz ;
yükseklik : 150 piksel ;
görüntülemek : esnek ;
sol dolgu : 20 piksel ;
hizalama öğeleri : merkez ;
arka plan rengi : Orman yeşili ;
}
Yukarıdaki kodu çalıştırdıktan sonra:
Yukarıdaki çıktı, metnin şimdi esnek kutunun ortasına hizalandığını gösterir.
Örnek 3: Alt Konum
Metni esnek kutunun altında ayarlamak için, “ esnek uç ” değeri “ hizalama öğeleri ' mülk. Bu sefer metin, esnek kutunun alt tarafta olduğu anlamına gelen konumda hizalanır:
.dikey {renk : beyaz ;
yükseklik : 150 piksel ;
görüntülemek : esnek ;
sol dolgu : 20 piksel ;
hizalama öğeleri : esnek uç ;
arka plan rengi : Orman yeşili ;
}
Yukarıdaki kodu çalıştırdıktan sonra, web sayfası şöyle görünür:
Yukarıdaki çıktı, metnin artık alt konumda dikey olarak hizalandığını gösterir.
Yöntem 2: “justify-content” Özelliğini Kullanma
“ haklı içerik ” özelliği, esnek kutu içindeki metni dikey olarak hizalamak için de kullanılabilir. Ancak, “ ile aynı şekilde çalışır. Metin hizalama ” özelliğini kullanır ve öğeleri satır yönünde hizalar. Bu nedenle, hizalama yönünü değiştirmek için “ esnek yön ” özelliğini ayarlamak için kullanılır. haklı içerik ' doğru hizalama ' kolon ' yön:
.dikey {yükseklik : 150 piksel ;
görüntülemek : esnek ;
sol dolgu : 20 piksel ;
renk : beyaz ;
arka plan rengi : koyu camgöbeği ;
esnek yön : kolon ;
haklı içerik : esnek uç ;
}
Yukarıdaki kodun açıklaması aşağıda verilmiştir:
- “ yükseklik ”, “ renk ' Ve ' sol dolgu ” özellikleri tıpkı yukarıdaki yöntem gibi çalışır.
- Bundan sonra, “ kolon ” değeri “ esnek yön Stilleri sütunlar aracılığıyla uygulamak için flexbox'ın ”.
- Bundan sonra “ haklı içerik ” özelliği, metni dikey olarak hizalar.
- Sonunda, “ esnek uç ” değeri, öğeyi “ üzerinde hizalar. alt ' taraf.
Not : Kullanıcılar ayrıca “ esnek başlangıç ' Ve ' merkez ” değerleri “ tepe ', Ve ' orta ” tarafları sırasıyla.
Örneğin, yukarıdaki kodu çalıştırdıktan sonra web sayfası şöyle görünür:
Yukarıdaki çıktı, metnin esnek kutunun altında hizalandığını gösterir.
Çözüm
Bir esnek kutu içindeki metni dikey olarak hizalamak için ' hizalama öğeleri ' Ve ' haklı içerik ” CSS özellikleri kullanılabilir. Bu özelliklerin her ikisi de “ esnek başlangıç ”, “ merkez ' veya ' esnek uç ' metni hizalamak için değerler ' tepe ”, “ orta ' Ve ' alt ” sırasıyla flexbox içindeki yönler. Bu makale, bir esnek kutuda metnin dikey hizalamasını göstermiştir.