Tata letak dan perataan tengah halaman website merupakan upaya kreatif dan seringkali menimbulkan kesulitan bagi pemula. Jadi mari kita lihat bagaimana melakukannya. Katakanlah kita ingin membuat halaman dengan struktur berikut:

Halaman kami terdiri dari empat blok: header, menu, konten, dan footer. Untuk memusatkan halaman, kita akan menempatkan empat blok ini ke dalam satu blok utama:

Tajuk situs

Isi

Bagian bawah situs

Dengan menggunakan struktur ini sebagai contoh, kami akan mempertimbangkan beberapa opsi.

Tata letak dan pemusatan situs karet

Saat meletakkan tapak karet, satuan ukuran utama yang digunakan adalah -%, karena tapak tersebut harus membentang sepanjang lebarnya dan menempati semua ruang kosong.

Oleh karena itu, lebar blok "header" dan "footer" akan menjadi 100% dari lebar layar. Biarkan lebar blok "menu" menjadi 30%, dan blok "konten" harus ditempatkan di sebelah blok "menu", mis. itu harus memiliki margin kiri (margin-kiri) dengan lebar sama dengan lebar blok "menu", mis. 30%.

Untuk membuat blok "menu" dan "konten" berdampingan, mari kita buat blok "menu" mengambang dan dorong ke tepi kiri. Kami juga akan mengatur warna latar belakang untuk blok kami. Sekarang mari kita tulis semua ini di style sheet (di halaman style.css)

#header( latar belakang:#3e4982; lebar:100%; tinggi:110px; perataan teks:tengah; warna:#FFFFFF; ukuran font:24px; padding-top:40px; ) #menu( latar belakang:#6173cb; float :kiri; lebar:300px; perataan teks:tengah; ukuran font:18px; #konten(latar belakang:#ffffff; margin-kiri:30% ; tinggi:300px; perataan teks:tengah; ) #footer( latar belakang: #3e4982; jelas:keduanya; lebar:100%; tinggi:50 piksel; perataan teks: tengah; warna:#FFFFFF;

Ketinggian balok diatur secara kondisional agar hasilnya terlihat. Lihat halaman kami di browser Anda:

Jika Anda mengubah ukuran jendela browser, lebar semua blok akan berubah. Ini tidak selalu nyaman, karena... Saat blok menu direntangkan, muncul ruang kosong. Oleh karena itu, lebar blok “menu” seringkali tetap, jadi mari kita lakukan hal yang sama. Untuk melakukan ini, ganti nilai properti terkait di style sheet:

... #menu( latar belakang:#6173cb; float:kiri; lebar:200px; tinggi:300px; ) #konten( latar belakang:#ffffff; margin-kiri:200px; tinggi:300px; ) ...

Sekarang halaman kami membentang lebih alami. Dengan tata letak yang lancar, halaman menempati seluruh lebar layar, sehingga penyelarasan halaman tidak diperlukan.

Namun jika mau, Anda dapat membuat halaman Anda memiliki padding yang sama di kiri dan kanan layar. Untuk melakukan ini, Anda perlu menambahkan gaya ke blok "utama", yang merupakan wadah untuk semua blok lainnya:

Sekarang halaman kita terlihat seperti ini:

Tata letak dan pemusatan situs, lebar tetap

Dalam hal ini, kita harus menetapkan ukuran tetap untuk blok kita:

#main( lebar:800px; ) #header( latar belakang:#3e4982; lebar:800px; tinggi:150px; perataan teks:tengah; warna:#FFFFFF; ukuran font:24px; padding-top:40px; ) #menu ( latar belakang:#6173cb; float:kiri; lebar:200px; tinggi:300px; perataan teks:tengah; warna:#FFFFFF; ukuran font:18px; padding-top:10px; ) #content( latar belakang:#ffffff; margin-kiri:200px; tinggi:300px; perataan teks:tengah; ) #footer( latar belakang:#3e4982; jelas:keduanya; lebar:800px; tinggi:50px; perataan teks:tengah; warna:#FFFFFF; font- ukuran:14px; bantalan-atas:10px )

Sekarang halaman kita ditekan ke tepi kiri layar.

Dalam hal ini, perataan tengah halaman situs dapat dilakukan sebagai berikut. Ingatlah bahwa halaman kita memiliki tag "body", yang juga dapat diberi lebar dan beberapa padding.

Mari kita lakukan ini: beri tag "body" lebar 800 piksel (seperti blok "utama") dan padding-left 50%. Kemudian seluruh isi blok "utama" akan ditampilkan di sisi kanan layar (yaitu dari tengah ke kanan):

Agar blok "utama" kita ditempatkan di tengah layar, bagian tengahnya harus bertepatan dengan bagian tengah tag "body". Itu. Anda perlu menggeser blok "utama" ke kiri sebanyak setengah ukurannya. Lebar blok "utama" adalah 800 piksel, yang berarti Anda perlu menyetel properti "margin-left:-400px" ke dalamnya. Ya, properti ini bisa bernilai negatif, lalu margin kirinya dikurangi (yaitu digeser ke kiri). Dan inilah yang kita butuhkan.

Style sheetnya sekarang terlihat seperti ini:

body( lebar:800px; padding-kiri:50%; ) #main( lebar:800px; margin-kiri:-400px; ) #header( latar belakang:#3e4982; lebar:800px; tinggi:150px; perataan teks:tengah ; warna:#FFFFFF; ukuran font:24px; padding-top:40px; ) #menu( latar belakang:#6173cb; float:kiri; lebar:200px; tinggi:300px; perataan teks:tengah; warna:#FFFFFF; ukuran font:18px; padding-atas:10px; ) #content( latar belakang:#ffffff; margin-kiri:200px; tinggi:300px; perataan teks:tengah; ) #footer( latar belakang:#3e4982; jelas:keduanya; lebar:800px;perataan teks:tengah;ukuran font:14px;

Dan halaman kita di browser terletak persis di tengah:

Kami melihat dua opsi untuk memusatkan halaman situs; sebenarnya, itu bukan dogma. Anda dapat bereksperimen dan membuat versi Anda sendiri, cukup periksa cara kerjanya di browser yang berbeda. Sayangnya, apa yang ditampilkan dengan baik di FireFox atau Opera mungkin tidak dapat dipahami sepenuhnya di IE dan sebaliknya. Dan kita harus mengingat ini.

Semoga sukses dalam pencarian kreatif Anda!

Halo! Kami terus menguasai dasar-dasar bahasa HTML. Mari kita lihat apa yang perlu Anda tulis untuk menyelaraskan teks ke tengah, lebar, atau tepi.

Untuk memulai bisnis, mari kita lihat cara memusatkan teks dalam HTML dengan tiga cara berbeda. Dua yang terakhir ditautkan langsung ke style sheet. Ini bisa berupa file CSS yang menghubungkan ke halaman situs dan menentukan tampilannya.

Ini sebenarnya cukup sederhana. Lihat contoh di bawah.

Sejajarkan paragraf ke tengah.

Jika Anda perlu memindahkan fragmen teks dengan cara yang berbeda, alih-alih parameter "pusat", masukkan nilai berikut:

• justify – menyelaraskan teks dengan lebar halaman;
• kanan – di tepi kanan;
• kiri - ke kiri.

Dengan analogi, Anda bisa memindahkan konten yang ada di header (h1, h2) dan container (div).

Desain yang disajikan di atas dapat sedikit diubah. Efeknya akan sama. Untuk melakukan ini, Anda perlu menulis kode di bawah ini.

Blok teks.

Dalam bentuk ini, kode ditulis langsung ke dalam HTML untuk memusatkan konten teks.

Ada cara alternatif lain untuk mencapai hasil. Anda perlu melakukan beberapa langkah.

Langkah 1. Di kode utama tulis

Materi teks.

Langkah 2. Pada file CSS yang disertakan, masukkan kode berikut:

Rovno (perataan teks: tengah;)

Saya perhatikan bahwa kata “rovno” hanyalah nama kelas yang bisa disebut berbeda. Hal ini diserahkan kepada kebijaksanaan programmer.

Dengan analogi, dalam HTML Anda dapat dengan mudah membuat teks berada di tengah, rata, dan rata di tepi kanan atau kiri halaman. Seperti yang Anda lihat, ada lebih dari satu pilihan untuk mencapai tujuan Anda.

Hanya beberapa pertanyaan:

• Apakah Anda melakukan proyek informasi nirlaba?
• Apakah Anda ingin situs web Anda mendapat peringkat yang baik di mesin pencari?
• Apakah Anda ingin mendapatkan penghasilan secara online?

Jika semua jawabannya positif, lihat saja pendekatan terpadu untuk pengembangan situs web. Informasi ini akan sangat berguna jika dijalankan pada CMS WordPress.

Saya ingin menunjukkan bahwa situs web Anda hanyalah salah satu dari banyak pilihan untuk menghasilkan pendapatan pasif atau aktif di Internet. Blog saya didedikasikan untuk peluang finansial online.

Pernahkah Anda bekerja di bidang arbitrase lalu lintas, copywriting, dan bidang aktivitas lain yang menghasilkan pendapatan utama atau tambahan melalui kolaborasi jarak jauh? Anda dapat mempelajari hal ini dan banyak lagi sekarang di halaman blog saya.

Saya akan mempublikasikan banyak informasi yang sangat berguna di masa depan. Tetap terhubung. Jika mau, Anda dapat berlangganan pembaruan Workip melalui email. Formulir berlangganan ada di bawah.

Memusatkan elemen secara vertikal menggunakan CSS adalah tugas yang menimbulkan kesulitan bagi pengembang. Namun ada beberapa cara untuk mengatasinya yang cukup sederhana. Pelajaran ini menyajikan 6 opsi untuk memusatkan konten secara vertikal.

Mari kita mulai dengan gambaran umum masalahnya.

Pemusatan horizontal sangat sederhana dan mudah. Jika elemen tengahnya sejajar, kita menggunakan properti perataan relatif terhadap elemen induknya. Ketika elemen berada pada level blok, kami mengatur lebarnya dan pengaturan otomatis margin kiri dan kanan.

Kebanyakan orang, ketika menggunakan properti text-align:, mengacu pada properti vertical-align untuk pemusatan vertikal. Semuanya terlihat cukup logis. Jika Anda pernah menggunakan templat tabel, Anda mungkin banyak menggunakan atribut valign, yang memperkuat keyakinan bahwa perataan vertikal adalah cara yang tepat untuk menyelesaikan masalah.

Namun atribut valign hanya berfungsi pada sel tabel. Dan properti perataan vertikal sangat mirip dengannya. Ini juga mempengaruhi sel tabel dan beberapa elemen sebaris.

Nilai properti perataan vertikal relatif terhadap elemen sebaris induk.

• Dalam satu baris teks, perataannya relatif terhadap tinggi baris.
• Sel tabel menggunakan penyelarasan relatif terhadap nilai yang dihitung dengan algoritma khusus (biasanya tinggi baris).

Namun sayangnya, properti perataan vertikal tidak berfungsi pada elemen tingkat blok (misalnya paragraf di dalam elemen div). Situasi ini mungkin membuat orang berpikir bahwa tidak ada solusi terhadap masalah keselarasan vertikal.

Namun ada metode lain untuk memusatkan elemen blok, pilihannya bergantung pada apa yang dipusatkan dalam kaitannya dengan wadah luar.

Metode ini berfungsi ketika Anda ingin memusatkan satu baris teks secara vertikal. Yang harus Anda lakukan adalah mengatur tinggi garis agar lebih besar dari ukuran font.

Secara default, spasi akan didistribusikan secara merata di bagian atas dan bawah teks. Dan garisnya akan dipusatkan secara vertikal. Seringkali tinggi garis dibuat sama dengan tinggi elemen.

Teks yang diperlukan

#anak ( tinggi garis: 200 piksel; )

Cara ini berfungsi di semua browser, meski hanya bisa digunakan untuk satu baris saja. Nilai 200 px dalam contoh dipilih secara sewenang-wenang. Anda dapat menggunakan nilai apa pun yang lebih besar dari ukuran font teks.

Bagaimana jika isinya berupa gambar? Apakah cara di atas akan berhasil? Jawabannya terletak pada satu baris kode CSS lagi.

#parent ( tinggi garis: 200px; ) #parent img ( perataan vertikal: tengah; )

Nilai properti line-height harus lebih besar dari tinggi gambar.

Telah disebutkan di atas bahwa properti perataan vertikal digunakan untuk sel tabel, yang berfungsi dengan baik. Kita dapat menampilkan elemen kita sebagai sel tabel dan menggunakan properti perataan vertikal di atasnya untuk memusatkan konten secara vertikal.

Catatan: Tabel CSS tidak sama dengan tabel HTML.

Isi

#parent (tampilan: tabel;) #anak ( tampilan: sel-tabel; perataan vertikal: tengah; )

Kami mengatur keluaran tabel ke elemen div induk dan menampilkan elemen div yang disarangkan sebagai sel tabel. Anda sekarang dapat menggunakan properti perataan vertikal pada wadah bagian dalam. Segala sesuatu di dalamnya akan terpusat secara vertikal.

Berbeda dengan cara di atas, dalam hal ini konten dapat bersifat dinamis karena elemen div akan berubah ukurannya sesuai dengan kontennya.

Kerugian dari metode ini adalah tidak berfungsi pada versi IE yang lebih lama. Anda harus menggunakan properti display: inline-block untuk wadah bersarang.

Metode ini juga berfungsi di semua browser. Tapi itu mengharuskan elemen yang dipusatkan diberi ketinggian.

Kode contoh melakukan pemusatan horizontal dan vertikal secara bersamaan:

Isi

#parent (posisi: relatif;) #child ( posisi: absolut; atas: 50%; kiri: 50%; tinggi: 30%; lebar: 50%; margin: -15% 0 0 -25%; )

Pertama, kita mengatur tipe pemosisian elemen. Selanjutnya, kita menyetel properti atas dan kiri elemen div bersarang menjadi 50%, yang sesuai dengan pusat elemen induk. Namun bagian tengahnya adalah pojok kiri atas elemen bersarang. Oleh karena itu, Anda perlu menaikkannya (setengah tinggi) dan memindahkannya ke kiri (setengah lebar), dan kemudian bagian tengahnya akan bertepatan dengan bagian tengah elemen induk. Jadi mengetahui ketinggian elemen dalam hal ini diperlukan. Kemudian kita atur elemen dengan margin atas dan kiri negatif masing-masing sama dengan setengah tinggi dan lebarnya.

Metode ini tidak berfungsi di semua browser.

Kode contoh melakukan pemusatan vertikal dan horizontal.

Isi

#parent (posisi: relatif;) #child ( posisi: absolut; atas: 0; bawah: 0; kiri: 0; kanan: 0; lebar: 50%; tinggi: 30%; margin: otomatis; )

Ide di balik metode ini adalah untuk memperluas elemen bersarang ke keempat batas elemen induk dengan menyetel properti atas, bawah, kanan, dan kiri ke 0.

Mengatur margin agar dihasilkan secara otomatis di semua sisi akan menetapkan nilai yang sama di keempat sisi dan memusatkan elemen div bersarang kita pada elemen induknya.

Sayangnya, metode ini tidak berfungsi di IE7 dan di bawahnya.

Dalam metode ini, padding yang sama secara eksplisit ditetapkan di bagian atas dan bawah elemen induk.

Isi

#orangtua ( padding: 5% 0; ) #anak ( padding: 10% 0; )

Contoh kode CSS menetapkan padding atas dan bawah untuk kedua elemen. Untuk elemen bersarang, pengaturan padding akan berfungsi untuk memusatkannya secara vertikal. Dan padding elemen induk akan memusatkan elemen bersarang di dalamnya.

Unit pengukuran relatif digunakan untuk mengubah ukuran elemen secara dinamis. Dan untuk satuan pengukuran absolut Anda harus melakukan perhitungan.

Misalnya, jika elemen induk memiliki tinggi 400px dan elemen yang disarangkan adalah 100px, maka diperlukan padding 150px di bagian atas dan bawah.

150 + 150 + 100 = 400

Menggunakan % memungkinkan Anda menyerahkan penghitungan ke browser.

Metode ini berfungsi di mana saja. Sisi negatifnya adalah perlunya perhitungan.

Catatan: Metode ini bekerja dengan mengatur padding luar elemen. Anda juga dapat menggunakan margin dalam suatu elemen. Keputusan untuk menggunakan margin atau padding harus dibuat tergantung pada spesifikasi proyek.

Metode ini menggunakan elemen div kosong yang mengapung dan membantu mengontrol posisi elemen bersarang di dokumen. Perhatikan bahwa div mengambang ditempatkan sebelum elemen bersarang kita dalam kode HTML.

Isi

#parent (height: 250px;) #floater ( float: kiri; tinggi: 50%; lebar: 100%; margin-bottom: -50px; ) #child ( hapus: keduanya; tinggi: 100px; )

Kami mengimbangi div kosong ke kiri atau kanan dan mengatur tingginya menjadi 50% dari elemen induknya. Dengan cara ini ia akan mengisi separuh atas elemen induk.

Karena div ini mengambang, maka div tersebut dihapus dari aliran normal dokumen, dan kita perlu membuka bungkusan teks pada elemen yang disarangkan. Contohnya menggunakan clear: Both , tetapi cukup menggunakan arah yang sama dengan offset elemen div kosong yang mengambang.

Batas atas elemen div bersarang berada tepat di bawah batas bawah elemen div kosong. Kita perlu memindahkan elemen bersarang ke atas setengah tinggi elemen kosong yang mengambang. Untuk mengatasi masalah ini, gunakan nilai properti margin-bottom negatif untuk elemen div kosong yang mengambang.

Metode ini juga berfungsi di semua browser. Namun, penggunaannya memerlukan elemen div kosong tambahan dan pengetahuan tentang ketinggian elemen yang disarangkan.

Semua metode yang dijelaskan mudah digunakan. Kesulitannya adalah tidak satupun yang cocok untuk semua kasus. Anda perlu menganalisis proyek dan memilih salah satu yang paling sesuai dengan kebutuhan.

Saya rasa banyak dari Anda yang pernah berurusan dengan tata letak mengalami kebutuhan untuk menyelaraskan elemen secara vertikal dan mengetahui kesulitan yang muncul saat menyelaraskan elemen ke tengah.

Ya, ada properti perataan vertikal multi-nilai khusus di CSS untuk perataan vertikal. Namun pada praktiknya tidak berjalan sesuai harapan. Mari kita coba mencari tahu.

Mari kita bandingkan pendekatan berikut. Sejajarkan menggunakan:

• tabel,
• lekukan,
• tinggi garis
• peregangan,
• margin negatif,
• mengubah
• elemen semu
• kotak fleksibel.

Ada dua elemen div, salah satunya bersarang di dalam elemen lainnya. Mari beri mereka kelas yang sesuai - luar dan dalam.

Tantangannya adalah menyelaraskan elemen dalam dengan pusat elemen luar.

Pertama, mari kita pertimbangkan kasus ketika dimensi blok luar dan dalam diketahui. Mari tambahkan aturan display: inline-block ke elemen dalam, dan text-align: center dan vertical-align: middle ke elemen luar.

Ingatlah bahwa penyelarasan hanya berlaku untuk elemen yang memiliki mode tampilan sebaris atau blok sebaris.

Mari kita atur ukuran bloknya, serta warna latar belakangnya sehingga kita bisa melihat batasnya.

Luar ( lebar: 200 piksel; tinggi: 200 piksel; perataan teks: tengah; perataan vertikal: tengah; warna latar: #ffc; ) .inner ( tampilan: blok sebaris; lebar: 100 piksel; tinggi: 100 piksel; warna latar : #fcc )
Setelah menerapkan gaya, kita akan melihat bahwa blok dalam disejajarkan secara horizontal, tetapi tidak secara vertikal:
http://jsfiddle.net/c1bgfffq/

Mengapa ini bisa terjadi? Intinya adalah properti vertical-align mempengaruhi perataan elemen itu sendiri, bukan isinya (kecuali jika diterapkan pada sel tabel). Oleh karena itu, penerapan properti ini pada elemen luar tidak menghasilkan apa pun. Selain itu, menerapkan properti ini ke elemen dalam juga tidak akan menghasilkan apa-apa, karena blok sebaris disejajarkan secara vertikal relatif terhadap blok yang berdekatan, dan dalam kasus kami, kami memiliki satu blok sebaris.

Ada beberapa teknik untuk mengatasi masalah ini. Di bawah ini kita akan melihat lebih dekat masing-masingnya.

Kerugian yang jelas dari solusi ini adalah, dari sudut pandang semantik, penggunaan tabel untuk penyelarasan adalah salah. Kerugian kedua adalah membuat tabel memerlukan penambahan elemen lain di sekitar blok luar.

Minus pertama dapat dihilangkan sebagian dengan mengganti tag tabel dan td dengan div dan mengatur mode tampilan tabel dalam CSS.

.outer-wrapper ( tampilan: tabel; ) .outer ( tampilan: sel tabel; )
Namun, blok terluar akan tetap menjadi meja dengan segala konsekuensinya.

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

Kelemahan dari solusi ini adalah bahwa solusi ini hanya dapat diterapkan dalam sejumlah kasus tertentu ketika ketinggian kedua balok diketahui.

Luar ( tinggi: 200px; tinggi garis: 200px; ) .inner ( spasi putih: nowrap; overflow: tersembunyi; )
http://jsfiddle.net/c1bgfffq/12/

Teknik ini juga dapat digunakan untuk menyelaraskan teks multibaris jika Anda mendefinisikan ulang nilai tinggi baris untuk blok dalam, dan juga menambahkan aturan display: inline-block dan vertical-align: middle.

Luar ( tinggi: 200px; tinggi garis: 200px; ) .inner ( tinggi garis: normal; tampilan: blok sebaris; perataan vertikal: tengah; )
http://jsfiddle.net/c1bgfffq/15/

Kerugian dari cara ini adalah ketinggian balok luar harus diketahui.

Untuk melakukan ini, Anda perlu:

Ide di balik teknik ini adalah mengatur ketinggian untuk blok yang diregangkan dan diposisikan secara absolut menyebabkan browser menghitung bantalan vertikal dalam rasio yang sama jika disetel ke auto .

Anda perlu mengatur blok eksternal ke posisi relatif, dan blok internal ke posisi absolut. Kemudian Anda perlu memindahkan blok dalam ke bawah setengah tinggi blok luar atas: 50% dan menaikkannya setengah tinggi margin-atasnya sendiri: -H dalam / 2.

Luar ( posisi: relatif; ) .inner ( tinggi: 100px; posisi: absolut; atas: 50%; margin-atas: -50px; )
http://jsfiddle.net/c1bgfffq/13/

Kekurangan cara ini adalah ketinggian unit indoor harus diketahui.

Luar ( posisi: relatif; ) .inner ( posisi: absolut; atas: 50%; transformasi: TranslateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Mengapa tidak mungkin menetapkan nilai sebagai persentase pada metode sebelumnya? Karena nilai persentase margin dihitung relatif terhadap elemen induk, nilai 50% akan menjadi setengah tinggi kotak luar, dan kita perlu menaikkan kotak dalam menjadi setengah tingginya. Properti transform sangat cocok untuk ini.

Kerugian dari metode ini adalah tidak dapat digunakan jika unit dalam ruangan memiliki posisi absolut.

Blok luar perlu disetel ke display: flex dan blok dalam ke margin: auto . Dan itu saja! Cantik, bukan?

Luar ( tampilan: flex; lebar: 200px; tinggi: 200px; ) .inner ( lebar: 100px; margin: otomatis; )
http://jsfiddle.net/c1bgfffq/14/

Kerugian dari metode ini adalah Flexbox hanya didukung oleh browser modern.

• Untuk menyelaraskan teks secara vertikal, lebih baik menggunakan indentasi vertikal atau properti line-height.
• Untuk elemen yang diposisikan secara mutlak dengan ketinggian yang diketahui (misalnya, ikon), metode dengan properti margin-top negatif sangat ideal.
• Untuk kasus yang lebih kompleks, ketika ketinggian balok tidak diketahui, Anda perlu menggunakan elemen semu atau properti transformasi.
• Nah, jika Anda sangat beruntung karena tidak perlu mendukung browser IE versi lama, tentu saja lebih baik menggunakan Flexbox.

Seringkali dalam tata letak perlu memusatkan beberapa elemen secara horizontal dan/atau vertikal. Oleh karena itu, saya memutuskan untuk membuat artikel dengan cara pemusatan yang berbeda, sehingga semuanya ada di satu tempat.

Penyelarasan horizontal menggunakan margin digunakan ketika lebar elemen tengah diketahui. Berfungsi untuk elemen blok:

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

Menentukan auto untuk margin kanan dan kiri menjadikannya sama, yang memusatkan elemen secara horizontal di dalam blok induk.

Metode ini cocok untuk memusatkan teks dalam satu blok. perataan teks: tengah:

Perataan dengan perataan teks .wrapper ( perataan teks: tengah; )

Saya berada di tengah

Cocok untuk memusatkan blok dengan lebar yang diketahui. Kami memberikan blok induk position: relative terhadap position relatif terhadapnya, elemen tengah position: absolute , left: 50% dan margin-left negatif yang nilainya sama dengan setengah lebar elemen:

Sejajarkan dengan posisi .wrapper ( position: relative; ) .wrapper p ( kiri: 50%; margin: 0 0 0 -100px; posisi: absolut; lebar: 200px; )

Saya berada di tengah

Metode ini cocok untuk menyelaraskan blok dengan lebar yang tidak diketahui, tetapi memerlukan induk pembungkus. Misalnya, Anda dapat memusatkan menu horizontal dengan cara ini:

Penyelarasan dengan tampilan: inline-block + text-align: center;

• .navigasi ( perataan teks: tengah; ) .navigasi li ( tampilan: blok sebaris; )
• Rumah

Ketinggian garis penyelarasan vertikal

Untuk menyelaraskan satu baris teks, Anda dapat menggunakan nilai tinggi dan spasi baris yang sama untuk blok induk. Cocok untuk tombol, item menu, dll.

tinggi garis .wrapper ( tinggi: 100 piksel; tinggi garis: 100 piksel; )

posisi dan margin negatif naik

Sebuah elemen dapat disejajarkan secara vertikal dengan memberinya ketinggian tetap dan menerapkan posisi: margin absolut dan negatif hingga sama dengan setengah tinggi elemen yang disejajarkan. Blok induk harus diberi position: relative:

Pembungkus ( posisi: relatif; ) elemen ( tinggi: 200px; margin: -100px 0 0; posisi: absolut; atas: 50%; )

Untuk perataan vertikal, properti display: table-cell diterapkan ke elemen, yang memaksanya untuk meniru sel tabel. Kami juga mengatur height dan vertical-align: middle . Mari kita bungkus semua ini dalam sebuah wadah dengan properti dislpay: table; :

Tampilan perataan vertikal: sel tabel .wrapper ( tampilan: tabel; lebar: 100%; ) .sel ( tampilan: sel tabel; tinggi: 100 piksel; perataan vertikal: tengah; )

tinggi garis .wrapper ( tinggi: 100 piksel; tinggi garis: 100 piksel; )

Kami mencari cara untuk menyelaraskan elemen pada halaman menggunakan CSS. Sekarang mari kita lihat implementasi jQuery.

Mari sambungkan jQuery ke halaman:

Saya sarankan menulis fungsi sederhana untuk memusatkan elemen pada halaman, sebut saja alignCenter() . Elemen itu sendiri bertindak sebagai argumen terhadap fungsi:

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

Di badan fungsi, kami secara dinamis menghitung dan menetapkan koordinat pusat halaman ke properti kiri dan atas CSS:

Fungsi alignCenter(elem) ( elem.css(( kiri: ($(window).width() - elem.width()) / 2 + "px", atas: ($(window).height() - elem. height()) / 2 + "px" // jangan lupa menambahkan position: absolute ke elemen untuk memicu koordinat )) )

Di baris pertama fungsi, kita mendapatkan lebar dokumen dan mengurangi lebar elemen, membaginya menjadi dua - ini akan menjadi bagian tengah horizontal halaman. Baris kedua melakukan hal yang sama, hanya dengan tinggi untuk penyelarasan vertikal.

Fungsinya sudah siap, yang tersisa hanyalah melampirkannya ke acara kesiapan DOM dan pengubahan ukuran jendela:

$(function() ( // memanggil fungsi pemusatan ketika DOM sudah siap alignCenter($(elem)); // memanggil fungsi ketika mengubah ukuran jendela $(window).resize(function() ( alignCenter($(elem )); )) // fungsi pemusatan elemen function alignCenter(elem) ( elem.css(( // menghitung koordinat kiri dan atas kiri: ($(window).width() - elem.width()) / 2 + " px", atas: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

Fitur CSS3 baru, seperti Flexbox, secara bertahap menjadi hal yang lumrah. Teknologi ini membantu membuat markup tanpa menggunakan pelampung, pemosisian, dll. Ini juga dapat digunakan untuk memusatkan elemen. Misalnya, terapkan Flexbox ke elemen induk.wrapper dan pusatkan konten di dalamnya:

Pembungkus ( tampilan: -webkit-box; tampilan: -moz-box; tampilan: -ms-flexbox; tampilan: -webkit-flex; tampilan: flex; tinggi: 500px; lebar: 500px; ) .wrapper .content ( margin: otomatis; /* margin: 0 otomatis; hanya secara horizontal */ /* margin: otomatis 0; hanya secara vertikal */ ) Lorem ipsum dolor sit amet

Aturan ini memusatkan elemen secara horizontal dan vertikal secara bersamaan - margin sekarang berfungsi tidak hanya untuk perataan horizontal, tetapi juga untuk perataan vertikal. Dan tanpa diketahui lebar/tingginya.