Masalah elemen pemusatan menegak dalam CSS mempunyai beberapa penyelesaian siap sedia. Memilih kaedah penjajaran dalam setiap kes istimewa bergantung pada jenis, saiz, kedudukan elemen dan sifat lain yang ditentukan oleh mereka.
Di bawah ialah beberapa teknik penjajaran menegak yang popular dalam kalangan pereka reka letak. Ia menunjukkan cara ia berfungsi dan untuk kes yang mana setiap satu daripadanya paling sesuai.
Berikut ialah dua elemen div:
Setiap kaedah akan digunakan untuk menjajarkan unit dalaman dengan bahagian tengah unit luaran.
ketinggian garisan untuk satu barisApabila ibu bapa menduduki satu baris teks dan ketinggian kanak-kanak diketahui, sifat ketinggian baris boleh digunakan. Nilai hartanah mestilah sama dengan ketinggian unit luaran. Ini hanya berfungsi untuk satu baris, jadi ia berguna untuk menambah limpahan: tersembunyi dan ruang putih: nowrap kepada kanak-kanak.
Anda tidak boleh menggunakan notasi peratusan ketinggian baris=100%, kerana 100% dalam kes ini ialah ketinggian fon.
Bekas (
ketinggian: 300px;
ketinggian garis: 300px;
}
Dalaman (
white-space: nowrap;
limpahan: tersembunyi;
}
Kaedah ini hanya boleh digunakan jika ketinggian blok luaran diketahui.
Jadual dengan penjajaran menegakJadual adalah sesuai untuk penjajaran menegak elemen. Agar tidak melanggar semantik, lebih baik membuat elemen jadual menggunakan CSS. Kedudukan kandungan sel dikawal oleh penjajaran menegak. Terdapat empat nilai untuk sifat ini dalam jadual:
Garis dasar - lalai;
. bawah — kandungan di bahagian bawah sel;
. tengah - kandungan di tengah sel;
. atas — kandungan di bahagian atas sel.
Dalam contoh pertama, sel jadual tunggal menjadi blok luar.
Bekas (
paparan: meja-sel;
vertical-align: tengah;
}
Perkara yang baik tentang kaedah ini ialah ia berfungsi untuk elemen tanpa ketinggian tertentu, tetapi dalam beberapa kes penggunaannya terhalang oleh fakta bahawa blok luar, seperti mana-mana sel jadual, menyesuaikan lebarnya kepada kandungannya, dan anda boleh meregangkannya. hanya dengan menetapkan lebar untuk lebar secara eksplisit. Untuk sel tanpa jadual, peratusan tidak berfungsi dengan secukupnya.
Kekurangan ini diperbetulkan dengan membungkus sel dalam induknya dengan sifat display:table. Saiz elemen ini boleh ditetapkan sebagai peratusan. Kod akhir akan kelihatan seperti ini:
pembalut luar (
paparan: meja;
}
Bekas (
paparan: meja-sel;
vertical-align: tengah;
}
Kaedah ini digunakan apabila ketinggian unsur dalaman diketahui. Ia mungkin tidak diketahui oleh unit luaran. Ibu bapa ditanya kedudukan relatif, dan keturunan di dalamnya adalah mutlak.
Nilai sifat teratas sebanyak 50% menyebabkan elemen bersarang diposisikan dengan tepi atasnya di tengah-tengah blok luar. Apa yang tinggal ialah menaikkan bahagian atas margin negatifnya sebanyak separuh ketinggiannya sendiri supaya ia berdiri tepat di tengah-tengah menegak.
Bekas (
kedudukan: relatif;
}
Dalaman (
ketinggian: 140px;
jawatan: mutlak;
atas: 50%;
jidar atas: -70px;
}
Kelemahan kaedah ini adalah keperluan untuk mengetahui ketinggian kanak-kanak.
Penjajaran sejajar dengan penjajaran menegakPenjajaran huruf kecil dan huruf kecil elemen blok, termasuk imej dan ikon, dalam teks yang mengelilinginya dijalankan oleh sifat penjajaran menegak. Tidak seperti jadual, dalam kes ini keseluruhan set nilainya yang dinyatakan dalam spesifikasi berfungsi.
Jika ketinggian induk diketahui, sifat ini boleh digunakan untuk memusatkan teks berbilang baris.
Untuk blok luar, pemusatan satu baris ditetapkan.
Bekas (
ketinggian: 140px;
ketinggian garis: 140px;
}
Nilai ketinggian garisan untuk blok dalam ditakrifkan semula kepada normal atau kepada mana-mana nilai yang dikehendaki. Ia juga diberikan penjajaran penjajaran menegak: tengah dan penukaran kepada jenis blok sebaris - paparan: blok sebaris.
Dalaman (
paparan: inline-block;
ketinggian garis: normal;
vertical-align: tengah;
}
Kelemahan kaedah ini ialah anda perlu mengetahui ketinggian ibu bapa.
Penjajaran dengan transformasiFungsi translateY bagi sifat transformasi membolehkan anda memusatkan blok dalaman yang tidak diketahui ketinggiannya. Untuk melakukan ini, ibu bapa mesti diletakkan secara relatif dan anak secara mutlak.
Harta atas dengan nilai 50% merendahkan blok dalam supaya tepi atasnya diletakkan di tengah-tengah induknya. Nilai TranslateY: -50%, menaikkan elemen kepada separuh ketinggiannya sendiri dan dengan itu menjajarkan pusat menegak blok.
Bekas (
kedudukan: relatif;
}
Dalaman (
jawatan: mutlak;
atas: 50%;
mengubah: translateY(-50%);
}
Kelemahan teknik ini ialah sokongan terhad untuk mengubah fungsi dalam pelayar IE.
Penjajaran melalui unsur pseudoKaedah ini berfungsi apabila ketinggian tidak diketahui untuk blok pertama mahupun kedua. Elemen pseudo blok sebaris ditambahkan di dalam induk menggunakan sebelum atau selepas. Ketinggian elemen tambahan mestilah sama dengan ketinggian induk - ketinggian: 100%. Penjajaran menegak kandungan ditetapkan menggunakan penjajaran menegak: tengah.
Menggunakan penjajaran menegak: tengah, blok dalam dijajarkan berbanding dengan unsur pseudo ini. Oleh kerana ibu bapa dan anak mempunyai ketinggian yang sama, elemen dalam, semasa dijajarkan secara menegak dengan unsur pseudo, juga dipusatkan dengan kotak luar.
Bekas:sebelum (
kandungan: "";
ketinggian: 100%;
vertical-align: tengah;
paparan: inline-block;
}
Dalaman (
paparan: inline-block;
vertical-align: tengah;
}
Cara universal. Tidak berfungsi jika unit dalaman ditetapkan kedudukan mutlak.
FlexboxCara terbaharu dan paling mudah untuk menjajarkan elemen secara menegak. Flexbox membolehkan anda mengatur elemen halaman Web mengikut kehendak anda. Untuk memusatkan blok, anda hanya perlu menetapkan paparan: flex untuk ibu bapa dan margin: auto untuk kanak-kanak.
Bekas (
paparan: flex;
lebar: 320px;
ketinggian: 140px;
}
Dalaman (
lebar: 120px;
margin: auto;
}
Flexbox hanya berfungsi dalam pelayar moden.
Memilih kaedahTeknik penjajaran menegak yang mana untuk digunakan bergantung pada tugas dan batasan yang mungkin ada dalam mana-mana kes tertentu.
Ketinggian unsur tidak diketahuiDalam keadaan ini, anda boleh menggunakan salah satu daripada empat kaedah universal:
1. Jadual. Induk menjadi sel jadual yang dicipta dalam HTML atau melalui paparan-table/display-cell. Elemen induk ini diberikan penjajaran menegak: tengah.
2. Unsur Pseudo. Untuk blok luar, elemen pseudo blok sebaris dibuat dengan lebar=100% dan jajaran menegak: tengah. Kanak-kanak diberikan paparan: blok sebaris dan jajaran menegak: tengah. Kaedah ini tidak berfungsi hanya apabila blok dalaman diberi kedudukan mutlak.
3. Berubah. Ibu bapa mendapat kedudukan: relatif. Kanak-kanak diberi kedudukan: mutlak, atas: 50% dan transform: translateY(-50%);
4. Flexbox. Blok luar ditetapkan untuk memaparkan: flex, blok dalam ditetapkan ke margin: auto.
Hanya ketinggian kanak-kanak itu diketahuiUnit luaran diletakkan secara relatif; Elemen dalam diberi kedudukan mutlak, atas: 50% dan margin atas sama dengan separuh ketinggiannya.
Satu baris setiap blok dengan ketinggian yang diketahuiBlok luar diberi sifat ketinggian garis dengan nilai yang sama dengan ketinggiannya.
Ketinggian blok luar diketahui, tetapi elemen dalam tidak.Induk diberi ketinggian garisan yang sama dengan ketinggiannya. Ketinggian garisan kanak-kanak ditakrifkan semula kepada nilai biasa atau mana-mana nilai yang diingini, dan paparan: blok sebaris dan jajaran menegak: tengah diberikan kepadanya.
Artikel hari ini bertujuan untuk menunjukkan kepada anda cara untuk memusatkan div, secara mendatar dan menegak, menggunakan beberapa helah CSS. Kami juga akan memberitahu anda cara untuk memusatkan seluruh halaman atau dalam elemen div individu.
Pusatkan elemen DIV dengan mudah pada halamanKaedah ini akan berfungsi dengan sempurna dalam semua pelayar.
CSSCenter-div ( margin: 0 auto; lebar: 100px; )
Contoh
Auto nilai dalam sifat margin menetapkan margin kiri dan kanan ke seluruh ruang yang tersedia pada halaman. Perkara penting yang perlu diingat di sini ialah elemen div berpusat mesti mempunyai set nilai lebar.
Memusatkan DIV dalam elemen DIV dengan cara lamaKaedah div penjajaran tengah ini akan berfungsi dalam semua penyemak imbas.
CSSOuter-div ( padding: 30px; ) .inner-div ( margin: 0 auto; width: 100px; )
HTMLContoh
Div luar boleh diletakkan dalam apa jua cara yang anda suka, tetapi div dalam mesti mempunyai lebar (lebar) yang ditentukan.
Memusatkan DIV di dalam elemen DIV menggunakan blok sebarisDalam kaedah memusatkan div dalam div ini, adalah tidak perlu untuk menentukan lebar elemen dalam. Ia akan berfungsi dalam semua pelayar moden, termasuk IE8.
CSSOuter-div ( padding: 30px; text-align: center; ) .inner-div ( display: inline-block; padding: 50px; )
HTMLContoh
sifat penjajaran teks hanya berfungsi pada elemen sebaris. Nilai blok sebaris membolehkan div dalam dipaparkan sebagai elemen sebaris dan juga sebagai blok (blok sebaris). Sifat penjajaran teks pada elemen div luar akan membolehkan kami memusatkan div dalam.
Pusatkan DIV di dalam elemen DIV secara mendatar dan menegakDi sini margin: auto digunakan untuk memusatkan div di tengah halaman. Contoh akan berfungsi dalam semua penyemak imbas moden.
CSSOuter-div ( padding: 30px; ) .inner-div ( margin: auto; width: 100px; height: 100px; )
HTMLContoh
Elemen div dalam mesti mempunyai lebar (lebar) dan ketinggian (tinggi) yang ditentukan. Kaedah ini tidak akan berfungsi jika elemen div luar mempunyai ketinggian tetap.
Pusatkan DIV oleh had bawah muka suratDi sini margin: auto digunakan untuk memusatkan div secara menegak dan kedudukan mutlak digunakan untuk unsur luaran. Kaedah ini akan berfungsi dalam semua pelayar moden.
CSSDiv luar ( kedudukan: mutlak; bawah: 30px; lebar: 100%; ) .div dalam ( margin: 0 auto; lebar: 100px; tinggi: 100px; warna latar belakang: #ccc; )
HTMLContoh
Div dalam mesti mempunyai set lebar. Ruang di bahagian bawah halaman dilaraskan menggunakan sifat bawah div luar. Anda juga boleh memusatkan div di bahagian atas halaman dengan menggantikan harta bawah dengan harta atas.
Pusatkan DIV pada halaman secara menegak dan mendatarDi sini, untuk memusatkan div, kami sekali lagi menggunakan margin: auto dan kedudukan mutlak div luar. Kaedah ini akan berfungsi dalam semua pelayar moden.
CSSCenter-div ( kedudukan: mutlak; margin: auto; atas: 0; kanan: 0; bawah: 0; kiri: 0; lebar: 100px; tinggi: 100px; )
Contoh
Elemen div mesti mempunyai lebar (lebar) dan tinggi (tinggi).
Membuat pemusatan adaptif elemen DIV pada halamanDi sini untuk penjajaran div Di tengah, menggunakan CSS, kami menjadikan lebar elemen div adaptif supaya ia bertindak balas kepada perubahan dalam saiz tetingkap. Kaedah ini berfungsi dalam semua pelayar.
CSSCenter-div ( margin: 0 auto; lebar maks: 700px; )
Contoh
Elemen div berpusat mesti mempunyai set sifat lebar maksimumnya.
Memusatkan DIV di dalam elemen menggunakan sifat blok dalamElemen div dalaman di sini adalah responsif. Kaedah memusatkan div di dalam div ini akan berfungsi dalam semua penyemak imbas.
CSSOuter-div ( padding: 30px; ) .inner-div ( margin: 0 auto; max-width: 700px; )
HTMLContoh
Div dalam mesti mempunyai set sifat lebar maksimumnya.
Memusatkan dua div responsif di sebelah satu sama lainDi sini kita mempunyai dua elemen div responsif bersebelahan. Kaedah meletakkan div di tengah skrin ini akan berfungsi dalam semua penyemak imbas moden.
CSSContainer ( text-align: center; ) .left-div ( display: inline-block; max-width: 300px; vertical-align: top; ) .right-div ( display: inline-block; max-width: 150px; ) skrin dan (lebar maksimum: 600px) ( .left-div, .right-div (lebar maks kiri: 100%; ) )
HTMLContoh
Di sini kita mempunyai beberapa elemen dengan sifat blok sebaris digunakan, terletak di dalam bekas berpusat. Contoh ini juga menggunakan pertanyaan media CSS; iaitu, jika saiz skrin kurang daripada 600 piksel, maka sifat lebar maksimum untuk kedua-dua div kiri dan kanan ditetapkan kepada 100%.
Elemen DIV berpusat menggunakan FlexboxDi sini kami memusatkan div CSS menggunakan Flexbox. Ia bertujuan untuk memudahkan proses pembangunan reka bentuk antara muka pengguna. Modul ini disokong oleh Chrome 38+, IE11, Microsoft Edge, Firefox 38+ , Safari 9+ , Opera 30+ , iOS Safari 9+ dan juga Pelayar Android 40+ .
CSSBekas ( paparan: flex; align-item: center; justify-content: center; height: 100vh; ) .item ( background-color: #f3f2ef; border-radius: 3px; width: 200px; height: 100px; )
Dalam proses meletakkan halaman web, tugas memusatkan blok adalah perkara biasa. Ini boleh sama ada berpusat menegak atau mendatar.
Sebagai contoh, jika tapak mempunyai lebar tetap, maka adalah rasional untuk menjajarkannya di tengah tetingkap penyemak imbas, kerana ini menjadikan teks lebih mudah dibaca (terutamanya jika monitor besar). Sesetengah reka bentuk biasanya melibatkan meletakkan blok di tengah tetingkap penyemak imbas, iaitu, pemusatan menegak dan mendatar.
Mula-mula, mari kita bercakap tentang pemusatan mendatar. Teknik yang paling popular ialah memusatkan blok dengan menetapkan margin kanan dan kiri kepada "auto" . Katakan kita mahu memusatkan blok dengan id = "bekas" dan lebar 860px. Dalam kes ini, dalam fail CSS anda perlu menulis:
#bekas (
warna latar belakang:#EEE;
lebar: 860px;
margin:0px auto;
}
Walau bagaimanapun, I.E. versi lama (5.0 sebagai contoh) tidak akan menyelaraskan blok ini berpusat. Sudah tentu, tiada siapa yang menggunakan penyemak imbas purba seperti itu lagi (daripada 1800 pelawat harian saya - hanya 1), tetapi untuk berjaga-jaga, lebih baik untuk menjadikannya berfungsi di sana juga :)
Untuk melakukan ini, elemen induk, iaitu, elemen di mana kita memusatkan blok kita (biasanya elemen induk ialah teg BODY), perlu menetapkan parameter text-align:center. Dalam kes ini, blok akan dijajarkan ke tengah, tetapi semua kandungannya juga akan dijajarkan ke tengah, tetapi kami tidak memerlukannya. Oleh itu, di dalam blok ini kami menetapkan penjajaran lalai - text-align:left .
badan (text-align:center)
#bekas (
warna latar belakang:#EEE;
lebar: 860px;
margin:0px auto;
text-align:left;
}
Terdapat juga cara lain untuk menjajarkan blok secara mendatar, berdasarkan . Seperti yang anda ketahui, secara lalai, sebarang elemen blok ditekan ke tepi kiri unsur induk. Oleh itu, untuk menyelaraskannya ke tengah anda perlukan:
2. Gerakkannya ke kanan sebanyak 50% daripada lebar tetingkap penyemak imbas
3. Menggunakan padding negatif, gerakkannya ke kiri dengan jarak yang sama dengan separuh lebar blok.
Dengan cara ini blok akan dipusatkan. Untuk lebih jelas, tonton video di bawah:
Contoh kod CSS:
#bekas (
warna latar belakang:#559964;
kedudukan:mutlak;
kiri: 50%;
jidar-kiri:-430px;
lebar: 860px;
}
Perlu diingatkan bahawa jika anda ingin meletakkan blok tidak relatif kepada tetingkap penyemak imbas, tetapi, sebagai contoh, relatif kepada blok lain, maka untuk blok lain ini anda perlu menetapkan kedudukan: relatif;
Katakan blok #bekas kami, yang perlu dipusatkan, terletak di dalam blok #bungkus. Kemudian kod akan kelihatan seperti ini:
#wrap(kedudukan:saudara)
#bekas (
warna latar belakang:#559964;
kedudukan:mutlak;
kiri: 50%;
jidar-kiri:-430px;
lebar: 860px;
}
Sekarang mari kita lihat kes apabila anda perlu menyelaraskan blok ke tengah halaman, i.e. Sapukan pemusatan mendatar dan menegak secara serentak. Kedudukan dimainkan di sini sekali lagi. Jadi kita perlukan:
1. Tetapkan blok kepada kedudukan mutlak
2. Gerakkannya ke kanan sebanyak 50% dan ke bawah sebanyak 50%, dengan itu meletakkan sudut kiri atasnya di tengah tetingkap penyemak imbas.
3. Menggunakan pelapik negatif, gerakkannya ke atas dengan jarak yang sama dengan separuh ketinggian bongkah, dan ke kiri dengan jarak yang sama dengan separuh lebar bongkah.
Ini akan meletakkan blok di tengah-tengah halaman web.
Katakan ketinggian blok kami ialah 600px dan lebarnya ialah 860px. Kemudian kod CSS akan kelihatan seperti ini:
#bekas (
warna latar belakang:#559964;
kedudukan:mutlak;
atas: 50%;
kiri: 50%;
jidar atas:-300px;
jidar-kiri:-430px;
ketinggian:600px;
lebar: 860px;
}
Saya harap prinsip itu sendiri jelas kepada anda.
Nilaikan pelajaran: 1 2 3 4 5
Komen:
Saya akan menjadi yang pertama untuk menonton pelajaran!!!
Eh... Kedua =) Saya baru-baru ini menghadapi masalah ini di IE, saya menderita untuk masa yang lama)) Terima kasih =)
Terima kasih, halaman yang ditanda halaman)))
Terima kasih banyak, Andrey, untuk pelajaran baharu!
Terima kasih sahaja, saya rasa tiada apa-apa untuk ditambahkan di sini))
Terima kasih atas pengajaran, saya benar-benar cuba melakukan ini beberapa hari yang lalu, menderita sedikit dan mengetepikan buat sementara waktu
Tetapi saya mempunyai masalah: tapak di Mozille Firefox tidak mahu diselaraskan, ia tersekat di tepi kiri dan itu sahaja, tiada satu pun di atas membantu (sama dalam Opera).
mengapa ini tidak berfungsi? - "jika anda ingin meletakkan blok bukan relatif kepada tetingkap penyemak imbas, tetapi, sebagai contoh, relatif kepada blok lain, untuk blok lain ini anda perlu menetapkan kedudukan: relatif;"
Terima kasih banyak-banyak!! terima kasih GIANT! Tuhan memberkati anda!
Semuanya baik-baik saja, tetapi atas sebab tertentu semua imej jatuh ke tempatnya hanya selepas mengemas kini penyemak imbas. Tolong beritahu saya mengapa ini berlaku?
Andrey, sila tambah carian tapak.
Tambah komen.
Selalunya dalam reka letak adalah perlu untuk memusatkan beberapa elemen secara mendatar dan/atau menegak. Oleh itu, saya memutuskan untuk membuat artikel dengan cara yang berbeza berpusat supaya semuanya berada di tangan di satu tempat.
Jidar penjajaran mendatar: autoPenjajaran mendatar apabila margin bantuan 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: tengahKaedah 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 kiriSesuai 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: inline-block + text-align: centerKaedah 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 menegakUntuk menjajarkan satu baris teks yang anda boleh gunakan nilai yang sama ketinggian dan jarak baris 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 naikUnsur 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 mejaUntuk 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; property. :
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 halamanKami melihat cara untuk menjajarkan elemen pada halaman apabila Bantuan CSS. Sekarang mari kita lihat pelaksanaan jQuery.
Mari sambungkan jQuery ke halaman:
Saya cadangkan menulis fungsi mudah 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 fungsi pemusatan elemen alignCenter(elem) ( elem.css(( // mengira kiri dan koordinat atas kiri: ($(window).width() - elem.width()) / 2 + " px", atas: ($(window).height() - elem.height()) / 2 + "px" )) ) ))
Penggunaan FlexboxCiri 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:
Pembungkus ( 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: auto 0; 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 projekSemasa membuat blok div, anda mungkin telah menemui situasi di mana anda perlu memusatkan div anda secara mendatar dan menegak menggunakan CSS tulen. Contohnya, apabila mencipta pop timbul dengan . Terdapat beberapa cara untuk melaksanakan pemusatan, dan dalam artikel ini saya akan berkongsi cara kegemaran dan paling mudah saya, menggunakan CSS atau jQuery.
Pertama, asas:
Pemusatan mendatar dalam CSSIni mudah dilakukan, kami gunakan margin Untuk kami div blok.
Nama Kelas( margin:0 auto; lebar: 200px; tinggi: 200px; )
Untuk memusatkan blok div hanya secara mendatar, anda perlu menentukan lebar blok (lebar), gunakan sifat auto untuk margin kiri dan kanan. Kaedah ini akan berfungsi untuk semua elemen blok (div, p, h1, dan seterusnya...). Untuk kegunaan pemusatan mendatar untuk elemen sebaris (pautan, gambar...), anda perlu menggunakan paparan: parameter blok;
Pemusatan mendatar dan menegak dalam CSSMemusatkan blok div secara mendatar dan menegak pada masa yang sama adalah sedikit lebih rumit. Anda perlu mengetahui dimensi blok div terlebih dahulu.
ClassName( width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px; )
Dengan menggunakan kedudukan mutlak blok, kita boleh menanggalkannya daripada elemen sekeliling dan menentukan kedudukannya berhubung dengan saiz tetingkap penyemak imbas. Gerakkan blok div 50% ke kiri dan atas tetingkap. Sudut kiri atas blok kini berada di tengah tetingkap penyemak imbas. Apa yang tinggal ialah meletakkan blok div di tengah halaman dengan mengalihkannya separuh lebarnya ke kiri dan separuh tingginya ke atas. Hooray! Hasilnya adalah pemusatan blok yang sangat baik css tulen kod.
Pemusatan mendatar dan menegak dengan jQuerySeperti yang dinyatakan sebelum ini - kaedah CSS pemusatan hanya berfungsi dengan dimensi tetap. Jika dimensi tidak dinyatakan, pertolongan akan datang kaedah jQuery:
$(window).resize(function())( $(".className").css(( position:"absolute", left: ($(window).width() - $(".className").outerWidth ( ))/2, atas: ($(window).height() - $(".className").outerHeight())/2 )); )); // Untuk menjalankan fungsi apabila tetingkap dimuatkan: $(window).resize();
Operasi kaedah ini adalah untuk menjalankan fungsi resize() menggunakan baris $(window).resize() . Fungsi ini berfungsi apabila tetingkap penyemak imbas diubah saiznya. Kami menggunakan outerWidth() dan outerHeight() kerana, tidak seperti width() dan height() , ia termasuk pelapik dan ketebalan sempadan dalam saiz yang dikembalikan. Baris terakhir, memulakan proses memusatkan blok div apabila halaman dimuatkan.
Kelebihan menggunakan kaedah ini ialah anda mungkin tidak tahu saiz div itu. Kelemahan utama ialah ia hanya berfungsi apabila JavaScript didayakan. Oleh itu, kaedah ini boleh diterima untuk antara muka pelbagai fungsi seperti VKontakte, Facebook, dll.
Seperti biasa, sila cadangkan kaedah kegemaran anda untuk memusatkan blok dengan mengulas.
