Bir metin herhangi bir yere kolayca eklenebilir, ancak hizalama yapılmadığında sunulamaz ve daha az çekici görünebilir. Hizalanmamış metin, bir web sayfasının tüm görünümünü de bozabilir. Web uygulamalarında bu tür şeylerin üstesinden gelmek için, metinleri kısa sürede hizalamanıza yardımcı olacak bazı yararlı CSS özelliklerini kullanabiliriz.
Bu makale, metnin CSS'de dikey olarak nasıl hizalanacağını gösterecektir.
CSS'de Metin Dikey Olarak Nasıl Hizalanır?
CSS'de metni dikey olarak hizalamak için aşağıdaki özellikleri kullanabilirsiniz:
-
- satır yüksekliği özelliği
- öğeleri görüntüleme ve hizalama özellikleri
Şimdi, her yöntemi tek tek inceleyelim!
Yöntem 1: Metni CSS'de Dikey Olarak Hizalamak için line-height Özelliğini Kullanma
“ satır yüksekliği ” özelliği, satır içi öğelerin altındaki ve yukarısındaki alanı belirtir. Bir metnin diğer öğelerden uzaklığını ayarlar. Line-height özelliği kullanılarak, metin dikey olarak ortaya kolayca hizalanabilir.
Örnek
İşte şu anda sol üst tarafta bulunan bir kutu (kenarlık) içindeki bir metin. Bu metni dikey ve yatay olarak ortaya hizalayalım:
Şimdi bir sonraki yönteme geçelim. “ esnek kutu ”, HTML'yi biçimlendirmenize izin veren tek boyutlu bir düzendir. Öğeleri dikey veya yatay olarak hizalamak için de kullanabilirsiniz. O halde bir örnek alalım ve flexbox yardımıyla bir metni dikey olarak hizalayalım. Örnek İlk olarak '' değerini ayarlayarak container'ımızı esnek hale getireceğiz. Görüntüle ” olarak mülk” esnek ”. Ardından, “ hizalama öğeleri ” ortadaki içeriği dikey olarak ayarlamak için özellik. Ayrıca, ortadaki içeriği yatay olarak hizalamak için “ haklı içerik ” özelliği kullanılacaktır: CSS'de metin, '' yardımıyla dikey olarak kolayca hizalanabilir. satır yüksekliği ' Emlak. Ayrıca “ esnek kutu “ ile metnin dikey hizalanması için Görüntüle ' ve ' hizalama öğeleri ' özellikleri. Flexbox tek boyutlu bir düzendir ve basitçe öğelerin dikey veya yatay hizalanması için kullanılır. Bu gönderi, metni CSS'de dikey olarak hizalamanıza yardımcı olabilecek en kolay iki yöntem sundu.
Bunu yapmak için bir kap ekleyin “
En İyi Eğitim Web Sitesi !
div >
Kutu bir “kullanılarak oluşturulmuştur. 3 piksel “sınır ve” 250 piksel ' yükseklik. “ yazı Boyutu ” özelliği, “ değeri ile birlikte kullanılır. 24 piksel ” yazı tipini görünür kılmak için. div'e bir “ atayacağız satır yüksekliği ' nın-nin ' 250 piksel ” metnini ortada dikey olarak hizalamak için. Daha sonra, “ Metin hizalama ” Metni ortaya hizalamak için özellik:
satır yüksekliği: 250 piksel;
metin hizalama: merkez;
yazı tipi boyutu: 24 piksel;
yükseklik: 250 piksel;
kenarlık: 3 piksel katı;
}
Gördüğünüz gibi, metin satır yüksekliği kullanılarak dikey olarak merkeze ve metin hizalama özelliği ile yatay olarak merkeze hizalanmıştır. Yöntem 2: Metni CSS'de Dikey Olarak Hizalamak için görüntüleme ve hizalama öğeleri Özelliğini kullanma
Görüntüle: esnek ;
hizalama öğeleri: merkez;
haklı içerik: merkez;
yazı tipi boyutu: 24 piksel;
yükseklik: 200 piksel;
kenarlık: 3 piksel katı;
}
Belirtilen metin başarıyla ortalanacak şekilde hizalandı:
CSS'de metni dikey olarak hizalama ile ilgili yöntemler sağladık. Çözüm