css penjajaran menegak. Penjajaran mendatar dan menegak elemen

Hari ini, pembaca yang budiman, kita akan menangani masalah penjajaran menegak dalam blok div.

Kemungkinan besar, anda sudah mengetahui tentang kewujudan ciri CSS yang indah-vertikal-align. Dan Tuhan sendiri memerintahkan kami untuk menggunakan sifat ini dengan tepat untuk penjajaran menegak (bukan tanpa alasan ia mempunyai nama yang jelas sendiri).

Pernyataan masalah: Ia adalah perlu untuk menjajarkan kandungan blok ketinggian berubah-ubah berpusat berbanding menegak.

Sekarang mari kita mula menyelesaikan masalah.

Oleh itu, kami mempunyai blok, ketinggiannya boleh berubah:

Sekat kandungan

Perkara pertama yang terlintas di fikiran ialah melakukan tipu daya berikut:

Sekat kandungan

Terdapat sebab untuk mempercayai bahawa frasa itu Sekat kandungan akan dijajarkan dengan ketinggian tengah bekas div.

Tetapi ia tidak ada di sana! Kami tidak akan mencapai sebarang penjajaran pusat yang dijangkakan dengan cara ini. Dan mengapa? Nampaknya semuanya ditunjukkan dengan betul. Ternyata ini adalah gosokan: harta penjajaran menegak hanya boleh digunakan untuk menjajarkan kandungan sel jadual atau menjajarkan elemen sebaris berbanding satu sama lain.

Mengenai penjajaran di dalam sel jadual, saya rasa semuanya jelas. Tetapi saya akan menerangkan satu lagi kes dengan elemen sebaris.

Penjajaran menegak elemen sebaris

Katakan anda mempunyai baris teks yang dipecahkan oleh tag baris kepada bahagian:

Sekeping teks mengalu-alukan anda!

Teg sebaris ialah bekas yang penampilannya tidak menyebabkan kandungan dibalut ke baris baharu.

Tindakan tag blok menyebabkan kandungan bekas dibalut ke baris baharu.

ialah tag blok. Jika kita melampirkan kepingan teks dalam blok , maka setiap daripada mereka akan berada di barisan baharu. Menggunakan tag , yang, tidak seperti , ialah huruf kecil, bekas tidak akan dialihkan ke baris baharu, semua bekas akan kekal pada satu baris.

bekas mudah digunakan apabila menentukan bahagian teks dengan pemformatan khas (menyerlahkannya dengan warna, fon berbeza, dsb.)

Untuk bekas Gunakan sifat CSS berikut:

#perviy( vertical-align:sub; ) #vtoroy( vertical-align:3px; ) #tretiy( vertical-align:-3px; )

Baris teks yang terhasil akan kelihatan seperti ini:

Ini tidak lebih daripada penjajaran menegak elemen sebaris, dan sifat penjajaran menegak CSS mengatasi tugas ini dengan sempurna.

Kami sedikit terganggu, kini kami kembali ke tugas utama kami.

Penjajaran menegak dalam bekas div

Walau apa pun, kami akan menggunakan sifat penjajaran menegak untuk penjajaran dalam bekas div. Seperti yang telah saya katakan, sifat ini boleh digunakan dalam kes menjajarkan elemen sebaris (kami membincangkan kes ini secara terperinci di atas dan ia tidak sesuai untuk kami untuk penjajaran dalam bekas div); yang tinggal hanyalah menggunakan hakikat itu penjajaran menegak berfungsi untuk sel jadual.

Bagaimana kita boleh menggunakan ini? Kami tidak mempunyai meja, kami bekerja dengan bekas div.

Ha, ternyata sangat mudah.

Sifat paparan CSS membolehkan kami menukar blok div kami menjadi sel jadual, ini boleh dilakukan dengan mudah dan semula jadi:

Katakan kita mempunyai div kelas textalign:

Sekat kandungan

Untuk blok ini kami menentukan sifat CSS berikut:

Textalign(paparan: table-cell; )

Arahan CSS ini secara ajaib akan menjadikan div kami menjadi sel jadual tanpa mengubahnya secara visual dalam apa jua cara. Dan untuk sel meja kita boleh menggunakan harta itu penjajaran menegak sepenuhnya dan penjajaran menegak yang dikehendaki akan berfungsi.

Namun, semuanya tidak boleh berakhir begitu sahaja. Kami mempunyai pelayar IE yang hebat. Dia tidak tahu bagaimana untuk bekerja dengan harta itu paparan: sel meja(Saya cadangkan anda membaca jadual yang menggambarkan kefungsian sifat CSS ini dalam pelayar yang berbeza di tapak web htmlbook.ru). Oleh itu, kita perlu menggunakan pelbagai helah.

Terdapat banyak cara untuk mencapai penjajaran dalam bekas div untuk semua penyemak imbas:

Kaedah menggunakan bekas div tambahan tambahan
Kaedah menggunakan ungkapan. Ia disambungkan dengan pengiraan ketinggian blok yang rumit. Anda tidak boleh melakukan ini tanpa pengetahuan tentang JavaScript.
Menggunakan sifat ketinggian garis. Kaedah ini hanya sesuai untuk penjajaran menegak dalam blok ketinggian yang diketahui, dan oleh itu tidak boleh digunakan dalam kes umum.
Menggunakan mengimbangi kandungan mutlak dan relatif dalam kes pelayar IE. Kaedah ini nampaknya paling mudah difahami dan mudah bagi saya. Selain itu, ia boleh dilaksanakan untuk bekas div ketinggian berubah-ubah. Kami akan membincangkannya dengan lebih terperinci.

Seperti yang anda fahami, kami hanya perlu menyelesaikan masalah penjajaran menegak dalam IE, yang dikaitkan dengan salah faham harta tersebut paparan: sel meja(IE6, IE7, IE8 tidak biasa dengan sifat ini). Oleh itu, menggunakan ulasan bersyarat khusus untuk penyemak imbas keluarga IE, kami akan menunjukkan sifat CSS yang lain.

Komen bersyarat

Jenis pembinaan:

... Arahan yang hanya terpakai jika keadaan dalam kurungan segi empat sama adalah benar...

dipanggil ulasan bersyarat (berhati-hati, jenis ulasan bersyarat mesti sepadan sepenuhnya dengan contoh yang diberikan, sehingga ruang).

Arahan yang terkandung dalam ulasan bersyarat sedemikian akan dilaksanakan hanya jika penyemak imbas yang mentafsir kod ini tergolong dalam keluarga IE.

Oleh itu, menggunakan komen bersyarat, kita boleh menyembunyikan sekeping kod daripada semua pelayar kecuali IE.

Penyelesaian masalah

Kerana semua pasli ini, kami perlu menyediakan kod HTML kami dengan dua bekas tambahan. Beginilah rupa blok teks kami:

Ini adalah sejenis teks pengesahan.
Ia terdiri daripada dua baris.

Untuk bekas div kelas penjajaran teks Sifat CSS ditetapkan yang menjajarkan kandungannya secara menegak untuk semua penyemak imbas biasa (kecuali IE, sudah tentu):

Paparan: sel meja; vertical-align: tengah;

Dan dua lagi sifat yang menetapkan lebar dan ketinggian untuk blok:

Lebar:500px; ketinggian: 500px;

Ini cukup untuk menjajarkan kandungan bekas secara menegak, dalam semua pelayar kecuali IE.

Sekarang kami mula menambah sifat yang berkaitan dengan penjajaran untuk penyemak imbas keluarga IE (untuk mereka kami menggunakan blok tambahan div Dan rentang):

Merujuk kepada tag div di dalam blok kelas penjajaran teks. Untuk melakukan ini, anda perlu menunjukkan nama kelas terlebih dahulu, dan kemudian, dipisahkan oleh ruang, teg yang kami akses.

Textalign div( kedudukan: mutlak; atas: 50%; )

Reka bentuk ini bermaksud: untuk semua tag div di dalam blok dengan kelas penjajaran teks gunakan sifat yang disenaraikan.

Sehubungan itu, gaya yang ditentukan untuk blok penjajaran teks diubah suai:

Textalign( paparan: sel jadual; jajaran menegak: tengah; lebar: 500px; tinggi: 500px; kedudukan: relatif; )

Sekarang titik kiri atas blok teks dialihkan ke bawah sebanyak 50%.

Untuk menerangkan apa yang berlaku, saya melukis ilustrasi:

Seperti yang anda lihat dari gambar, kami telah membuat beberapa kemajuan. Tetapi bukan itu sahaja! Titik kiri atas blok kuning sebenarnya telah bergerak 50% ke bawah, berbanding blok induk (ungu). Tetapi kita memerlukan lima puluh peratus ketinggian blok ungu untuk menjadi pusat blok kuning, dan bukan titik kiri atasnya.

Sekarang tag akan mula dimainkan rentang dan kedudukan relatifnya:

Jangka penjajaran teks( kedudukan: relatif; atas: -50%; )

Oleh itu, kami telah menganjakkan bongkah kuning sebanyak 50% daripada ketinggiannya, berbanding dengan kedudukan awalnya. Seperti yang anda faham, ketinggian bongkah kuning adalah sama dengan ketinggian kandungan berpusat. Dan operasi terakhir pada bekas span meletakkan kandungan kami di tengah blok ungu. Hooray!

Jom main tipu sikit

Pertama sekali, kita perlu menyembunyikan pasli dari semua pelayar biasa dan membukanya untuk IE. Ini boleh dilakukan, sudah tentu, menggunakan ulasan bersyarat;

.textalign div( kedudukan: mutlak; atas: 50%; ) .textalign span( kedudukan: relatif; atas: -50%; )

Ada masalah kecil. Jika kandungan berpusat terlalu tinggi, maka ini membawa kepada akibat yang tidak menyenangkan: terdapat ketinggian tambahan untuk tatal menegak.

Penyelesaian kepada masalah: anda perlu menambah harta limpahan: tersembunyi blok penjajaran teks.

Kenali hartanah secara terperinci melimpah mungkin dalam.

Arahan CSS terakhir untuk blok penjajaran teks mempunyai bentuk:

Textalign( paparan: sel jadual; jajaran menegak: tengah; lebar: 500px; tinggi: 500px; kedudukan: relatif; limpahan: tersembunyi; sempadan: 1px hitam pepejal; )

Maaf, saya terlupa untuk menyebut satu perkara penting. Jika anda cuba menetapkan ketinggian blok kelas penjajaran teks dalam segi peratusan, maka tiada apa yang akan berjaya untuk anda.

Memusatkan dalam blok ketinggian berubah-ubah

Selalunya terdapat keperluan untuk menetapkan ketinggian blok kelas penjajaran teks bukan dalam piksel, tetapi sebagai peratusan ketinggian blok induk, dan selaraskan kandungan bekas div di tengah.

Tangkapannya ialah mustahil untuk melakukan ini untuk sel jadual (tetapi blok kelas penjajaran teks bertukar menjadi sel meja, terima kasih kepada harta itu paparan:table-cell).

Dalam kes ini, anda mesti menggunakan blok luaran yang mana sifat CSS ditentukan paparan:meja dan sudah menetapkan nilai peratusan ketinggian untuknya. Kemudian blok bersarang di dalamnya, dengan arahan CSS paparan:table-cell, dengan senang hati akan mewarisi ketinggian blok induk.

Untuk melaksanakan blok ketinggian berubah-ubah dalam contoh kami, kami akan mengedit CSS sedikit:

Ke kelas penjajaran teks kami akan menukar nilai hartanah paparan Dengan sel meja pada meja dan alih keluar arahan penjajaran jajar menegak: tengah. Kini kita boleh menukar nilai ketinggian dengan selamat daripada 500 piksel kepada, sebagai contoh, 100%.

Jadi sifat CSS untuk blok kelas penjajaran teks akan kelihatan seperti ini:

Textalign( paparan: jadual; lebar: 500px; tinggi: 100%; kedudukan: relatif; limpahan: tersembunyi; sempadan: 1px hitam pepejal; )

Yang tinggal hanyalah melaksanakan pemusatan kandungan. Untuk melakukan ini, bekas div bersarang dalam blok kelas penjajaran teks(ini adalah blok kuning yang sama dalam gambar), anda perlu menetapkan sifat CSS paparan:table-cell, maka ia akan mewarisi ketinggian 100% daripada blok induk penjajaran teks(blok ungu). Dan tiada apa yang akan menghalang kami daripada menjajarkan kandungan bekas div bersarang di tengah dengan harta itu jajar menegak: tengah.

Kami mendapat satu lagi senarai tambahan sifat CSS untuk blok div yang bersarang dalam bekas penjajaran teks.

Textalign div( paparan: table-cell; vertical-align: middle; )

Itulah muslihat keseluruhannya. Jika dikehendaki, anda boleh mempunyai ketinggian berubah-ubah dengan kandungan berpusat.

Untuk mendapatkan maklumat lanjut tentang penjajaran menegak bagi blok ketinggian berubah-ubah, lihat.

Setiap orang yang berurusan dengan reka letak lambat laun berhadapan dengan keperluan untuk menjajarkan elemen secara menegak... dan mereka tahu apa kesukaran yang boleh timbul apabila menjajarkan elemen ke tengah. Dalam CSS terdapat sifat `vertical-align` dengan banyak nilai yang, secara logiknya, harus melakukan penjajaran menegak. Walau bagaimanapun, dalam amalan ia tidak berfungsi sama sekali seperti yang diharapkan.

Terdapat beberapa teknik untuk menyelesaikan masalah ini. Di bawah ini kita akan melihat dengan lebih dekat setiap daripada mereka.

1. Penjajaran menggunakan jadual

Dalam kes ini, kami menggantikan blok luar dengan jadual sel tunggal. Penjajaran akan digunakan pada kandungan sel, iaitu blok dalam.

HTML

CSS

Luar ( lebar : 200px ; tinggi : 200px ; text-align : tengah ; vertical-align : tengah ; background-color : #ffc ; )

Kelemahan utama penyelesaian ini, dari sudut semantik, adalah penggunaan jadual untuk tujuan lain daripada tujuan yang dimaksudkan. Kelemahan kedua ialah mencipta jadual memerlukan penambahan elemen lain di sekeliling blok luar.

Kelemahan pertama boleh dielakkan sebahagiannya dengan menggantikan teg jadual dengan div dan menetapkan mod paparan jadual dalam CSS.

HTML

CSS

Pembungkus luar ( paparan : meja ; ) .luar ( paparan : sel meja ; )

2. Penjajaran menggunakan inden

Dengan syarat kita mengetahui ketinggian blok dalam dan luar, penjajaran boleh ditetapkan menggunakan inden menegak blok dalam menggunakan formula: (H luar – H dalam) / 2.

CSS

Luar ( tinggi : 200px ; ) .dalaman ( tinggi : 100px ; jidar : 50px 0 ; )

Kelemahan penyelesaian adalah pengetahuan wajib tentang ketinggian kedua-dua blok.

3. Penjajaran menggunakan ketinggian garisan

Jika blok dalam menduduki tidak lebih daripada satu baris teks, maka anda boleh menggunakan sifat ketinggian garis dan tetapkannya sama dengan ketinggian blok luar. Memandangkan kandungan blok dalam tidak sepatutnya dibalut ke baris kedua, adalah dinasihatkan untuk menambah ruang putih: nowrap dan limpahan: peraturan tersembunyi.

CSS

Luar ( tinggi : 200px ; line-height : 200px ; ) .dalam ( white-space : nowrap ; limpahan : tersembunyi ; )

Kaedah ini juga boleh digunakan untuk menjajarkan teks berbilang baris. Untuk melakukan ini, blok dalam perlu mengatasi nilai ketinggian garis, dan juga menambah paparan: blok sebaris dan penjajaran menegak: peraturan tengah.

CSS

Luar ( ketinggian : 200px ; tinggi garisan : 200px ; ) .dalaman ( ketinggian garisan : biasa ; paparan : blok sebaris ; jajaran menegak : tengah ; )

Kelemahan kaedah ini ialah ketinggian blok luaran mesti diketahui.

4. Penjajaran menggunakan "regangan"

Kaedah ini boleh digunakan apabila ketinggian blok dalaman diketahui oleh kami, tetapi yang luaran tidak.

Untuk menggunakan kaedah ini kita perlukan:

Tetapkan blok luar kepada kedudukan kedudukan relatif: relative , dan blok dalam kepada kedudukan mutlak: absolute ;
Tambah beberapa peraturan atas: 0 dan bawah: 0 ke blok dalam, akibatnya ia akan meregang ke seluruh ketinggian blok luar;
Tetapkan pelapik menegak blok dalaman kepada auto .

CSS

Luar ( kedudukan : relatif ; ) .dalam ( tinggi : 100px ; kedudukan : mutlak ; atas : 0 ; bawah : 0 ; jidar : auto 0 ; )

5. Penjajaran dengan margin atas negatif

Sama seperti yang sebelumnya, kaedah ini digunakan apabila ketinggian blok luaran tidak diketahui, tetapi ketinggian blok dalaman diketahui.

Anda perlu menetapkan blok luaran kepada kedudukan relatif, dan blok dalaman kepada kedudukan mutlak. Kemudian gerakkan bongkah dalam ke bawah dengan separuh ketinggian bahagian atas blok luar: 50% dan naikkannya dengan separuh atas ketinggiannya sendiri: -Hinner / 2 .

CSS

Luar ( kedudukan : relatif ; ) .dalaman ( ketinggian : 100px ; kedudukan : mutlak ; atas : 50% ; margin-atas : -50px ; )

Kelemahan kaedah ini ialah ketinggian unit dalaman mesti diketahui.

6. Penjajaran menggunakan penjelmaan

Kaedah ini boleh digunakan apabila ketinggian unit dalaman tidak diketahui. Anda perlu mengalihkan blok dalam ke bawah sebanyak separuh ketinggian bahagian atas blok luar: 50% , kemudian gunakan sifat transformasi dan gerakkannya semula menggunakan fungsi translateY(-50%).

CSS

Luar ( kedudukan : relatif ; ) .dalam ( kedudukan : mutlak ; atas : 50% ; transformasi : translateY (-50%) ); )

7. Penjajaran dengan unsur pseudo

Ini adalah kaedah paling universal yang boleh digunakan apabila ketinggian kedua-dua blok tidak diketahui.

Intipati kaedah ini adalah untuk menambah blok sebaris dengan ketinggian 100% di dalam blok luar dan memberikannya penjajaran menegak. Oleh itu, ketinggian blok yang ditambah akan sama dengan ketinggian blok luar. Blok dalaman akan dijajarkan secara menegak berkenaan dengan blok tambahan, dan oleh itu blok luaran.

Untuk tidak melanggar semantik, adalah dinasihatkan untuk menambah blok sebaris menggunakan elemen pseudo sebelum atau selepas.

CSS

Luar :sebelum ( paparan : inline-block ; ketinggian : 100% ; vertical-align : middle ; content : "" ; ) .inner ( display : inline-block ; vertical-align : middle ; )

Kelemahan kaedah ini ialah ia tidak boleh digunakan dengan kedudukan mutlak unit dalaman.

8. Penjajaran dengan Flexbox

Cara penjajaran menegak yang paling moden ialah menggunakan Reka Letak Kotak Fleksibel (atau singkatannya Flexbox). Ia membolehkan anda mengawal kedudukan elemen pada halaman secara fleksibel, menyusunnya hampir di mana-mana sahaja. Penjajaran tengah untuk Flexbox adalah tugas yang sangat mudah.

Selalunya semasa susun atur terdapat keperluan untuk penjajaran menegak teks dalam blok. Jika ini perlu dilakukan dalam sel jadual, maka nilai sifat CSS penjajaran menegak ditetapkan.

Tetapi persoalan yang munasabah timbul: adakah mungkin dilakukan tanpa jadual, tanpa membebankan susun atur halaman dengan tag yang tidak perlu? Jawapannya ialah "anda boleh," tetapi disebabkan sokongan CSS yang lemah dalam penyemak imbas MSIE, penyelesaian kepada masalah untuknya akan berbeza daripada penyelesaian untuk penyemak imbas biasa yang lain.

Sebagai contoh, pertimbangkan serpihan berikut:

div(
sempadan: 1px pepejal #000;
ketinggian: 10em;
lebar: 10em;
}

Beberapa teks

dan cuba menjajarkan teks secara menegak ke tengah blok dan ke tepi bawah blok.

Menyelesaikan masalah penyemak imbas "Betul" (termasuk MSIE

Kebanyakan penyemak imbas moden menyokong CSS2.1, iaitu nilai sel jadual untuk sifat paparan. Ini memberi kita peluang untuk memaksa blok teks muncul sebagai sel jadual dan, mengambil kesempatan daripada ini, menjajarkan teks secara menegak:

div(
paparan: meja-sel;
vertical-align: tengah;
}

div(
paparan: meja-sel;
vertical-align: bawah;
}

Internet Explorer (sehingga versi 7 termasuk)

Anda boleh menyelesaikan masalah menjajarkan teks ke tepi bawah blok dalam MSIE menggunakan kedudukan mutlak (di sini kita memerlukan elemen rentetan yang dibenamkan dalam blok):

div(
kedudukan: relatif;
}
rentang div (
paparan: blok;
jawatan: mutlak;
bawah: 0%;
kiri: 0%;
lebar: 100%;
}

Set peraturan ini juga berfungsi dalam penyemak imbas "betul".

Nyatakan sifat

rentang div (
paparan: blok;
lebar: 100%;
}

tidak perlu, tetapi ia mungkin diperlukan jika, sebagai tambahan kepada penjajaran teks menegak, anda juga merancang untuk menggunakan penjajaran mendatar, sebagai contoh, penjajaran teks: pusat ;.

Untuk menjajarkan teks secara menegak ke tengah blok, serpihan asal masih perlu rumit - kami akan memperkenalkan elemen baris lain:

Bahan untuk belajar:

Pemusatan Menegak dalam CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
Pemusatan menegak menggunakan CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
Jajaran menegak (www.cssplay.co.uk/ie/valign.html)
vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
Kaedah penjajaran menegak lain dalam CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

Selalunya dalam reka letak adalah perlu untuk memusatkan beberapa elemen secara mendatar dan/atau menegak. Oleh itu, saya memutuskan untuk membuat artikel dengan cara pemusatan yang berbeza, supaya semuanya berada di tangan di satu tempat.

Jidar penjajaran mendatar: auto

Penjajaran mendatar menggunakan jidar digunakan apabila lebar elemen berpusat diketahui. Berfungsi untuk elemen blok:

Elem ( margin-kiri: auto; margin-kanan: auto; lebar: 50%; )

Menentukan auto untuk jidar kanan dan kiri menjadikannya sama, yang memusatkan elemen secara mendatar dalam blok induk.

penjajaran teks: tengah

Kaedah ini sesuai untuk memusatkan teks dalam blok. penjajaran teks: tengah:

Penjajaran dengan text-align .wrapper ( text-align: center; )

Saya sejajar tengah

kedudukan dan margin negatif kiri

Sesuai untuk memusatkan blok dengan lebar yang diketahui. Kami memberikan kedudukan blok induk: relatif kepada kedudukan berbanding dengannya, kedudukan elemen berpusat: absolute , kiri: 50% dan margin-kiri negatif yang nilainya sama dengan separuh lebar elemen:

Penjajaran dengan kedudukan .pembungkus ( kedudukan: relatif; ) .pembungkus p ( kiri: 50%; jidar: 0 0 0 -100px; kedudukan: mutlak; lebar: 200px; )

Saya sejajar tengah

paparan: blok sebaris + penjajaran teks: tengah

Kaedah ini sesuai untuk menjajarkan blok yang tidak diketahui lebarnya, tetapi memerlukan induk pembalut. Sebagai contoh, anda boleh memusatkan menu mendatar dengan cara ini:

Penjajaran dengan paparan: inline-block + text-align: center; .navigation ( text-align: center; ) .navigation li ( display: inline-block; )

Ketinggian garis penjajaran menegak

Untuk menjajarkan satu baris teks, anda boleh menggunakan ketinggian dan nilai jarak baris yang sama untuk blok induk. Sesuai untuk butang, item menu, dll.

line-height .wrapper ( ketinggian: 100px; line-height: 100px; )

Saya dijajarkan secara menegak

kedudukan dan margin negatif naik

Unsur boleh dijajarkan secara menegak dengan memberikannya ketinggian tetap dan menggunakan kedudukan: jidar mutlak dan negatif sehingga sama dengan separuh ketinggian unsur yang dijajarkan. Blok induk mesti diberi kedudukan: relatif:

Pembungkus ( kedudukan: relatif; ) elem ( ketinggian: 200px; jidar: -100px 0 0; kedudukan: mutlak; atas: 50%; )

Dengan cara ini, menggunakan kedudukan dan margin negatif, anda boleh memusatkan elemen pada halaman.

paparan: sel meja

Untuk penjajaran menegak, paparan: sifat sel jadual digunakan pada elemen, yang memaksanya untuk meniru sel jadual. Kami juga menetapkan ketinggian dan penjajaran menegak: tengah . Mari bungkus semua ini dalam bekas dengan dislpay: table; :

Paparan penjajaran menegak: sel jadual .pembungkus ( paparan: jadual; lebar: 100%; ) .sel ( paparan: sel jadual; ketinggian: 100px; jajaran menegak: tengah; )

Saya dijajarkan secara menegak

Penjajaran dinamik elemen pada halaman

Kami melihat cara untuk menjajarkan elemen pada halaman menggunakan CSS. Sekarang mari kita lihat pelaksanaan jQuery.

Mari sambungkan jQuery ke halaman:

Saya cadangkan menulis fungsi mudah untuk memusatkan elemen pada halaman, mari kita panggil ia alignCenter() . Elemen itu sendiri bertindak sebagai hujah kepada fungsi:

Fungsi alignCenter(elem) ( // kod di sini )

Dalam badan fungsi, kami mengira dan menetapkan koordinat pusat halaman secara dinamik kepada sifat kiri dan atas CSS:

Fungsi alignCenter(elem) ( elem.css(( left: ($(window).width() - elem.width()) / 2 + "px", atas: ($(window).height() - elem. height()) / 2 + "px" // jangan lupa untuk menambah kedudukan: mutlak kepada elemen untuk mencetuskan koordinat )) )

Dalam baris pertama fungsi, kami mendapat lebar dokumen dan tolak daripadanya lebar elemen, dibahagikan kepada separuh - ini akan menjadi pusat mendatar halaman. Baris kedua melakukan perkara yang sama, hanya dengan ketinggian untuk penjajaran menegak.

Fungsi sudah sedia, yang tinggal hanyalah melampirkannya pada acara kesediaan DOM dan saiz semula tetingkap:

$(function() ( // panggil fungsi pemusatan apabila DOM sedia alignCenter($(elem)); // panggil fungsi apabila mengubah saiz tetingkap $(window).resize(function() ( alignCenter($(elem) )); )) // fungsi pemusatan elemen alignCenter(elem) ( elem.css(( // mengira kiri dan atas koordinat kiri: ($(window).width() - elem.width()) / 2 + " px", atas: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

Penggunaan Flexbox

Ciri CSS3 baharu, seperti Flexbox, secara beransur-ansur menjadi perkara biasa. Teknologi ini membantu membuat penanda tanpa menggunakan terapung, kedudukan, dsb. Ia juga boleh digunakan untuk memusatkan elemen. Contohnya, gunakan Flexbox pada elemen induk.pembungkus dan tengahkan kandungan di dalam:

Pembalut ( paparan: -webkit-box; paparan: -moz-box; paparan: -ms-flexbox; paparan: -webkit-flex; paparan: flex; tinggi: 500px; lebar: 500px; ) .wrapper .content ( margin: auto; /* margin: 0 auto mendatar sahaja */ /* margin: menegak sahaja */ ) Lorem ipsum dolor sit amet

Peraturan ini memusatkan elemen secara mendatar dan menegak pada masa yang sama - jidar kini berfungsi bukan sahaja untuk penjajaran mendatar, tetapi juga untuk penjajaran menegak. Dan tanpa diketahui lebar/tinggi.

Sumber berkaitan Bantu projek

Saya rasa ramai di antara anda yang terpaksa berurusan dengan susun atur telah menghadapi keperluan untuk menyelaraskan elemen secara menegak dan mengetahui kesukaran yang timbul apabila menjajarkan elemen ke tengah.

Ya, terdapat ciri penjajaran menegak berbilang nilai khas dalam CSS untuk penjajaran menegak. Walau bagaimanapun, dalam amalan ia tidak berfungsi sama sekali seperti yang diharapkan. Mari cuba fikirkan perkara ini.

Mari bandingkan pendekatan berikut. Penjajaran dengan:

meja,
lekukan,
ketinggian garisan
regangan,
margin negatif,
mengubah
unsur pseudo
kotak lentur.

Untuk menggambarkan, pertimbangkan contoh berikut.

Terdapat dua elemen div, dengan satu daripadanya bersarang di dalam satu lagi. Mari beri mereka kelas yang sepadan - luar dan dalam.

Cabarannya adalah untuk menyelaraskan elemen dalam dengan pusat elemen luar.

Pertama, mari kita pertimbangkan kes apabila dimensi blok luaran dan dalaman diketahui. Mari tambahkan paparan peraturan: blok sebaris pada elemen dalam, dan jajaran teks: jajaran tengah dan menegak: tengah ke unsur luar.

Ingat bahawa penjajaran hanya digunakan pada elemen yang mempunyai mod paparan sebaris atau blok sebaris.

Mari kita tetapkan saiz blok, serta warna latar belakang supaya kita dapat melihat sempadannya.

Luar ( lebar: 200px; tinggi: 200px; jajaran teks: tengah; jajaran menegak: tengah; warna latar belakang: #ffc; ) .dalaman ( paparan: blok sebaris; lebar: 100px; tinggi: 100px; warna latar belakang : #fcc )
Selepas menggunakan gaya, kita akan melihat bahawa blok dalam dijajarkan secara mendatar, tetapi tidak secara menegak:
http://jsfiddle.net/c1bgfffq/

Mengapa ia berlaku? Intinya ialah sifat penjajaran menegak mempengaruhi penjajaran elemen itu sendiri, bukan kandungannya (kecuali apabila ia digunakan pada sel jadual). Oleh itu, menggunakan sifat ini pada elemen luar tidak menghasilkan apa-apa. Selain itu, menggunakan sifat ini pada elemen dalam juga tidak akan melakukan apa-apa, kerana blok sebaris dijajarkan secara menegak berbanding blok bersebelahan, dan dalam kes kami, kami mempunyai satu blok sebaris.

Terdapat beberapa teknik untuk menyelesaikan masalah ini. Di bawah ini kita akan melihat dengan lebih dekat setiap daripada mereka.

Penjajaran menggunakan jadual Penyelesaian pertama yang terlintas di fikiran ialah menggantikan blok luar dengan jadual satu sel. Dalam kes ini, penjajaran akan digunakan pada kandungan sel, iaitu, pada blok dalam.

http://jsfiddle.net/c1bgfffq/1/

Kelemahan jelas penyelesaian ini ialah, dari sudut pandangan semantik, adalah tidak betul untuk menggunakan jadual untuk penjajaran. Kelemahan kedua ialah mencipta jadual memerlukan penambahan elemen lain di sekeliling blok luar.

Tolak pertama boleh dikeluarkan sebahagiannya dengan menggantikan teg jadual dan td dengan div dan menetapkan mod paparan jadual dalam CSS.

.pembungkus luar ( paparan: meja; ) .luar ( paparan: sel meja; )
Walau bagaimanapun, blok luar masih akan kekal sebagai jadual dengan semua akibat yang berikutnya.

Penjajaran menggunakan inden Jika ketinggian blok dalam dan luar diketahui, maka penjajaran boleh ditetapkan menggunakan inden menegak blok dalam menggunakan formula: (H luar – H dalam) / 2.

Luar ( tinggi: 200px; ) .dalaman (tinggi: 100px; jidar: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Kelemahan penyelesaian ialah ia hanya terpakai dalam bilangan kes yang terhad apabila ketinggian kedua-dua blok diketahui.

Menjajarkan dengan ketinggian garisan Jika anda tahu bahawa blok dalam harus menduduki tidak lebih daripada satu baris teks, maka anda boleh menggunakan sifat ketinggian garis dan tetapkannya sama dengan ketinggian blok luar. Memandangkan kandungan blok dalam tidak sepatutnya dibalut ke baris kedua, adalah disyorkan untuk menambah ruang putih: nowrap dan limpahan: peraturan tersembunyi.

Luar ( ketinggian: 200px; ketinggian garis: 200px; ) .dalaman (ruang putih: nowrap; limpahan: tersembunyi; )
http://jsfiddle.net/c1bgfffq/12/

Teknik ini juga boleh digunakan untuk menjajarkan teks berbilang baris jika anda mentakrifkan semula nilai ketinggian baris untuk blok dalam, dan juga menambah paparan: blok sebaris dan penjajaran menegak: peraturan tengah.

Luar ( ketinggian: 200px; ketinggian garis: 200px; ) .dalaman (tinggi garis: biasa; paparan: blok sebaris; jajaran menegak: tengah; )
http://jsfiddle.net/c1bgfffq/15/

Kelemahan kaedah ini ialah ketinggian blok luaran mesti diketahui.

Penjajaran menggunakan "regangan" Kaedah ini boleh digunakan apabila ketinggian blok luar tidak diketahui, tetapi ketinggian blok dalam diketahui.

Untuk melakukan ini anda perlukan:

tetapkan kedudukan relatif kepada blok luaran, dan kedudukan mutlak kepada blok dalaman;

tambah peraturan atas: 0 dan bawah: 0 ke blok dalam, akibatnya ia akan meregangkan ke seluruh ketinggian blok luar;

tetapkan pelapik menegak blok dalam kepada auto.

.luar ( kedudukan: relatif; ) .dalam ( tinggi: 100px; kedudukan: mutlak; atas: 0; bawah: 0; jidar: auto 0; )
http://jsfiddle.net/c1bgfffq/4/

Idea di sebalik teknik ini ialah menetapkan ketinggian untuk blok yang diregangkan dan diposisikan secara mutlak menyebabkan penyemak imbas mengira pelapik menegak dalam nisbah yang sama jika ia ditetapkan kepada auto.

Penjajaran menggunakan margin-top negatif Kaedah ini telah diketahui secara meluas dan digunakan dengan kerap. Seperti yang sebelumnya, ia digunakan apabila ketinggian blok luar tidak diketahui, tetapi ketinggian bahagian dalam diketahui.

Anda perlu menetapkan blok luaran kepada kedudukan relatif, dan blok dalaman kepada kedudukan mutlak. Kemudian anda perlu mengalihkan bongkah dalam ke bawah dengan separuh ketinggian bahagian atas blok luar: 50% dan naikkannya separuh atas ketinggiannya sendiri: -H dalam / 2.

Luar ( kedudukan: relatif; ) .dalam ( ketinggian: 100px; kedudukan: mutlak; atas: 50%; jidar atas: -50px; )
http://jsfiddle.net/c1bgfffq/13/

Kelemahan kaedah ini ialah ketinggian unit dalaman mesti diketahui.

Penjajaran menggunakan transformasi Kaedah ini serupa dengan yang sebelumnya, tetapi ia boleh digunakan apabila ketinggian blok dalam tidak diketahui. Dalam kes ini, bukannya menetapkan padding piksel negatif, anda boleh menggunakan sifat transformasi dan mengalihkan blok dalam ke atas menggunakan fungsi translateY dan nilai -50% .

Luar ( kedudukan: relatif; ) .dalam ( kedudukan: mutlak; atas: 50%; ubah: terjemahY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Mengapakah mustahil untuk menetapkan nilai sebagai peratusan dalam kaedah sebelumnya? Oleh kerana nilai margin peratusan dikira secara relatif kepada elemen induk, nilai 50% ialah separuh ketinggian kotak luar, dan kita perlu menaikkan kotak dalam kepada separuh ketinggiannya sendiri. Harta transform adalah sempurna untuk ini.

Kelemahan kaedah ini ialah ia tidak boleh digunakan jika unit dalaman mempunyai kedudukan mutlak.

Penjajaran dengan Flexbox Cara penjajaran menegak yang paling moden ialah menggunakan Susun Atur Kotak Fleksibel (lebih dikenali sebagai Flexbox). Modul ini membolehkan anda mengawal kedudukan elemen pada halaman secara fleksibel, menyusunnya hampir di mana-mana sahaja. Penjajaran tengah untuk Flexbox adalah tugas yang sangat mudah.

Blok luar perlu ditetapkan untuk memaparkan: flex dan blok dalam ke jidar: auto . Dan itu sahaja! Cantik, bukan?

Luar ( paparan: lentur; lebar: 200px; tinggi: 200px; ) .dalaman ( lebar: 100px; jidar: auto; )
http://jsfiddle.net/c1bgfffq/14/

Kelemahan kaedah ini ialah Flexbox hanya disokong oleh pelayar moden.

Kaedah manakah yang harus saya pilih? Anda perlu bermula dari pernyataan masalah:

Untuk menjajarkan teks secara menegak, lebih baik menggunakan inden menegak atau sifat ketinggian garis.
Untuk elemen yang diletakkan secara mutlak dengan ketinggian yang diketahui (contohnya, ikon), kaedah dengan sifat atas margin negatif adalah sesuai.
Untuk kes yang lebih kompleks, apabila ketinggian blok tidak diketahui, anda perlu menggunakan elemen pseudo atau sifat transformasi.
Nah, jika anda bernasib baik sehingga anda tidak perlu menyokong versi lama pelayar IE, maka, sudah tentu, lebih baik menggunakan Flexbox.

Tag: Tambah tag