Artikel ini menunjukkan cara meratakan teks secara vertikal di dalam kotak fleksibel:
Metode 1: Menggunakan Properti 'align-item'.
Untuk menyelaraskan teks secara vertikal, pengguna dapat menggunakan tombol “ menyelaraskan-item ” properti yang disediakan oleh CSS. Ini membantu elemen untuk mengatur perataan mereka di dalam kotak fleksibel. Kemungkinan posisi penyelarasan vertikal dapat berada di “ atas ”, tengah ', atau ' dasar ' samping.
Demonstrasi praktis untuk menyelaraskan elemen dalam arah ini dinyatakan di bawah ini:
Contoh 1: Posisi Teratas
Untuk meratakan teks di dalam flexbox di posisi atas, tombol “ mulai fleksibel ” nilai diberikan ke “ menyelaraskan-item ' Properti. Properti ini ditugaskan ke div utama yang akan ditampilkan sebagai flex. Mari kita asumsikan, div dengan kelas “ vertikal ” dibuat dalam file HTML. Kemudian di file CSS, pilih kelas itu dan tetapkan properti berikut:
.vertikal {
warna : putih ;
tinggi : 150px ;
menampilkan : melenturkan ;
padding-kiri : 20px ;
menyelaraskan-item : mulai fleksibel ;
warna latar belakang : hutan hijau ;
}
- Pertama, gaya dasar dan perataan diberikan ke div menggunakan properti warna, warna latar, dan tinggi CSS.
- Properti 'tampilan' juga diatur ke 'fleksibel' untuk membuatnya menjadi kotak fleksibel.
- Terakhir, untuk menampilkan teks di awal flexbox, setel properti “align-items” ke “flex-start.
Setelah mengeksekusi kode di atas, halaman web terlihat seperti ini:
Keluaran menampilkan bahwa teks sekarang disejajarkan di posisi teratas di dalam kotak fleksibel.
Contoh 2: Posisi Tengah
Untuk meratakan teks secara vertikal di posisi tengah, setel “ tengah ' nilai ke CSS ' menyelaraskan-item ' Properti:
.vertikal {warna : putih ;
tinggi : 150px ;
menampilkan : melenturkan ;
padding-kiri : 20px ;
menyelaraskan-item : tengah ;
warna latar belakang : hutan hijau ;
}
Setelah eksekusi kode di atas:
Output di atas menampilkan bahwa teks sekarang disejajarkan di tengah kotak fleksibel.
Contoh 3: Posisi Bawah
Untuk mengatur teks di bagian bawah flexbox, beri tanda “ flex-end nilai ” ke “ menyelaraskan-item ' Properti. Kali ini teks disejajarkan pada posisi di mana flexbox berakhir berarti di sisi bawah:
.vertikal {warna : putih ;
tinggi : 150px ;
menampilkan : melenturkan ;
padding-kiri : 20px ;
menyelaraskan-item : flex-end ;
warna latar belakang : hutan hijau ;
}
Setelah mengeksekusi kode di atas, halaman web terlihat seperti ini:
Output di atas menampilkan bahwa teks sekarang sejajar secara vertikal di posisi bawah.
Metode 2: Menggunakan Properti 'justify-content'.
“ membenarkan-konten ” properti juga dapat digunakan untuk menyelaraskan teks secara vertikal di dalam kotak fleksibel. Namun, fungsinya sama dengan ' perataan teks ” dan menyelaraskan elemen dalam arah baris. Jadi, untuk mengubah arah perataan, tombol “ flex-direction Properti ” digunakan untuk mengatur properti “ membenarkan-konten ” kesejajaran menuju “ kolom ' arah:
.vertikal {tinggi : 150px ;
menampilkan : melenturkan ;
padding-kiri : 20px ;
warna : putih ;
warna latar belakang : darkcyan ;
flex-direction : kolom ;
membenarkan-konten : flex-end ;
}
Penjelasan kode di atas ada di bawah ini:
- “ tinggi ”, “ warna ' Dan ' padding-kiri ” properti berfungsi seperti metode di atas.
- Setelah itu, atur “ kolom nilai ” ke “ flex-direction ” dari flexbox untuk menerapkan gaya melalui kolom.
- Setelah itu, “ membenarkan-konten ” Properti menyelaraskan teks secara vertikal.
- Pada akhirnya, “ flex-end ” nilai menyelaraskan elemen pada “ dasar ' samping.
Catatan : Pengguna juga dapat mengatur “ mulai fleksibel ' Dan ' tengah ” nilai ke “ atas ', Dan ' tengah ” sisi, masing-masing.
Misalnya, setelah mengeksekusi kode di atas, halaman web terlihat seperti ini:
Output di atas menampilkan bahwa teks disejajarkan di bagian bawah kotak fleksibel.
Kesimpulan
Untuk meratakan teks secara vertikal di dalam flexbox, tombol “ menyelaraskan-item ' Dan ' membenarkan-konten ”Properti CSS dapat dimanfaatkan. Kedua properti ini mendapatkan “ mulai fleksibel ”, “ tengah ' atau ' flex-end ” nilai untuk menyelaraskan teks di “ atas ”, “ tengah ' Dan ' dasar ” arah di dalam flexbox, masing-masing. Artikel ini telah menunjukkan perataan vertikal teks dalam kotak fleksibel.