Cara Mengatasi Teks dan Ikon Vertikal Dalam CSS

Artikel ini akan memperkenalkan pelbagai kaedah CSS mendatar dan menegak yang pernah rumit tetapi kini mudah dilaksanakan. Kami akan meliputi pusat mendatar dan menegak menggunakan Flexbox dan kedudukan ditambah transformasi. Dalam artikel lain, kami juga akan meliputi cara menggunakan grid CSS untuk pusat mendatar dan menegak.

Ringkasan mata utama

Gunakan Flexbox Teks dan Ikon Berpusat Vertikal: Tukar bekas ke bekas Flex dan gunakan
• dan justify-content kepada elemen kanak -kanak yang berpusat. align-items
Gabungan
• dan position boleh mencapai pusat menegak, terutamanya untuk unsur -unsur yang sangat berubah -ubah. Ini dilakukan dengan mewujudkan konteks kedudukan dan menyesuaikan kedudukan elemen relatif kepada bekasnya. transform Atribut
• boleh digunakan untuk secara menegak memusatkan satu baris teks atau ikon dalam bekas ketinggian tetap, manakala line-height boleh digunakan untuk memusatkan elemen inline. vertical-align

bagaimana menggunakan flexbox untuk pusat mendatar dan menegak

Flexbox boleh menyelaraskan unsur -unsur secara mendatar dan menegak, dengan itu memusatkan teks, ikon, atau unsur lain dalam CSS.

Untuk menggunakan elemen pusat flexbox, anda boleh menggunakan coretan kod berikut:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Coretan kod ini menukar

ke bekas flex, secara automatik menukar elemen anaknya ke projek Flex. Anda kemudian boleh menggunakan .container untuk memusatkan item flex ini secara mendatar dan menggunakan justify-content untuk memusatkan secara menegak. align-items

Lihat Contoh:

pautan codepen

Teruskan membaca untuk mengetahui tentang teknik kedudukan dan kedudukan menegak model kotak.

Cara menggunakan kedudukan dan mengubah untuk mencapai pusat menegak fleksibel

Apabila anda tidak boleh menggunakan Flexbox atau anda perlu memusatkan item di dalam bekas, anda boleh menggunakan

untuk meletakkan elemen di tengah -tengah bekasnya. position Sebaliknya, kita boleh menggabungkan

dan mengubah ke elemen yang sangat berubah -ubah secara vertikal. Sebagai contoh, untuk memusatkan elemen secara menegak merentasi keseluruhan ketinggian viewport, anda boleh menggunakan coretan kod berikut:

position

kita mula -mula membuat konteks kedudukan dengan menetapkan

.container {
  position: relative;
  min-height: 100vh;
}
.vertical-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

pada elemen kontena. Ini akan membolehkan kita mencari elemen

dalam sempadannya. position: relative .vertical-center Seterusnya, kami meletakkan sudut kiri atas elemen yang akan berpusat di tengah bekasnya dengan meletakkan tepi atasnya pada 50% daripada bahagian atas elemen induknya dan kelebihan kiri di 50% dari kiri tempat elemen induk.

Akhirnya, laraskan elemen kembali ke pusat dengan panning ke atas 50% ketinggiannya dan 50% lebarnya ke kiri. Sekarang unsur -unsur kita berpusat secara menegak dan mendatar di dalam bekas. Oleh kerana penempatan dilakukan dengan menggunakan nilai peratusan berbanding saiz elemen, elemen akan tetap berpusat jika lebar atau ketinggian bekas atau perubahan elemen kanak -kanak.

Lihat Contoh:

pautan codepen

cara menggunakan ketinggian garis untuk berpusat secara menegak pada ketinggian tetap

Untuk memusatkan satu baris teks atau ikon secara menegak dalam bekasnya, gunakan atribut line-height. Harta ini mengawal ketinggian garis dalam teks yang dijalankan dan menambah jumlah ruang yang sama di atas dan di bawah wireframe elemen inline. Jika ketinggian bekas diketahui, menetapkan line-height nilai yang sama akan menghidupkan elemen kanak -kanak secara menegak.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

bagaimana menggunakan vertikal-align untuk memusatkan elemen inline

Atribut

vertical-align hanya mempengaruhi unsur -unsur yang dipaparkan sebagai inline, inline-block atau table-cell.

Ia memerlukan panjang, peratusan, atau nilai kata kunci.

Panjang dan peratusan menyelaraskan garis dasar elemen dengan jarak tertentu di atas garis dasar elemen induknya.

nilai kata kunci boleh menjadi salah satu daripada yang berikut:

• baseline
• sub
• super
• text-top
• text-bottom
• middle
Kebanyakannya sangat intuitif, tetapi
• menyelaraskan garis dasar dengan asas subskrip elemen induk, manakala top menyelaraskan garis dasar elemen dengan garis dasar superskrip elemen induk.
• mari kita lihat bottom dalam contoh praktikal.

Berikut adalah imej dan grid teks, yang kedua -duanya mempunyai ketinggian yang berbeza, yang bermaksud bahawa teks itu tidak semua diselaraskan dengan kemas.

sub (kod HTML dalam teks asal harus dimasukkan di sini dan diubahsuai dengan sewajarnya untuk menjadikannya lebih ringkas dan mudah difahami, dan elakkan menggunakan pautan yang tidak sah) super

kita boleh menetapkan bekas grid ke

dan menggunakan vertical-align pada imej untuk membuat semuanya bersesuaian dengan kemas.

Jika tidak ada teks di sini, dan kami mahu semua imej dipusatkan secara menegak, kami boleh menggunakan

dan mendapatkan hasil yang cukup baik.

Untuk kaedah yang lebih pusat, pastikan anda melihat cara menggunakan grid CSS untuk pusat mendatar dan menegak.

display: inline-block vertical-align: bottom FAQ mengenai cara memusatkan teks dan ikon secara menegak dalam CSS

vertical-align: middle (bahagian FAQ asal telah diselaraskan di sini, mengekalkan maklumat teras, dan menyatakan beberapa jawapan dengan lebih jelas.)

Apakah penjajaran menegak?

penjajaran menegak dalam CSS adalah atribut yang mengawal kedudukan unsur -unsur di sepanjang paksi menegak. Ia adalah alat yang berkuasa yang membantu anda merancang susun atur anda dengan tepat dan fleksibel. Ia boleh digunakan untuk elemen pusat menegak, menyelaraskannya dengan bahagian atas atau bawah bekas, atau mengedarkannya secara merata di ruang menegak. Atribut

dalam CSS biasanya digunakan dengan unsur -unsur blok sebaris atau sebaris, tetapi juga boleh digunakan dengan sel -sel meja.

Bagaimana menggunakan CSS untuk menggunakan teks secara menegak?

boleh menggunakan

dan vertical-align untuk memusatkan teks secara menegak.

Bolehkah anda menggunakan penjajaran menegak untuk memproses elemen peringkat blok?

Unsur-unsur peringkat blok boleh diselaraskan secara menegak menggunakan position: relative; top: 50%; transform: translateY(-50%);.

Mengapa penjajaran menegak saya tidak berfungsi?

Punca-punca mungkin termasuk bekas induk yang tidak menentukan ketinggian, atau cuba menyelaraskan unsur-unsur peringkat blok menggunakan

. vertical-align

Bagaimana untuk menyelaraskan imej secara menegak?

kaedah yang sama seperti teks boleh digunakan.

Bolehkah penjajaran menegak digunakan untuk mengendalikan grid CSS? boleh digunakan.

align-items Bagaimana cara menjajarkan teks secara menegak dalam butang?

boleh digunakan dengan atribut , yang nilainya harus sama dengan ketinggian butang.

line-height Bagaimana untuk menyelaraskan pelbagai elemen secara menegak?

kaedah flex atau grid boleh digunakan.

Bolehkah kedudukan mutlak dikendalikan menggunakan penjajaran menegak?

dan boleh digunakan.

top Bagaimana untuk menjajarkan teks secara menegak dalam sel meja? transform

boleh digunakan .

Atas ialah kandungan terperinci Cara Mengatasi Teks dan Ikon Vertikal Dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!