Penyelarasan elemen HTML. Memusatkan div dan kehalusan posisi lainnya

Seringkali tugasnya adalah menyelaraskan blok di tengah halaman/layar, dan bahkan tanpa skrip Java, tanpa menyetel dimensi kaku atau indentasi negatif, dan agar bilah gulir berfungsi untuk induknya jika blok melebihi ukurannya. . Ada banyak contoh monoton di Internet tentang cara menyelaraskan blok ke tengah layar. Biasanya, kebanyakan dari mereka didasarkan pada prinsip yang sama.

Di bawah ini adalah cara utama untuk menyelesaikan masalah, pro dan kontranya. Untuk memahami inti dari contoh, saya sarankan untuk mengurangi tinggi/lebar jendela Hasil pada contoh di tautan yang disediakan.

Opsi 1: Indentasi negatif.

Penentuan posisi memblokir menggunakan atribut atas dan kiri sebesar 50%, dan mengetahui terlebih dahulu tinggi dan lebar balok, tetapkan margin negatif, yaitu sama dengan setengah ukuran memblokir. Kerugian besar dari opsi ini adalah Anda perlu menghitung indentasi negatif. Juga memblokir tidak berperilaku benar saat dikelilingi oleh bilah gulir - ia terpotong begitu saja karena memiliki margin negatif.

Induk ( lebar: 100%; tinggi: 100%; posisi: absolut; atas: 0; kiri: 0; luapan: otomatis; ) .block ( lebar: 250 piksel; tinggi: 250 piksel; posisi: absolut; atas: 50%; kiri : 50%; margin: -125px 0 0 -125px; img (lebar maks: 100%; tinggi: otomatis; tampilan: blok; margin: 0 otomatis; batas: tidak ada; ) )

Opsi 2. Indentasi otomatis.

Kurang umum, tapi mirip dengan yang pertama. Untuk memblokir kita atur lebar dan tinggi, posisikan atribut kanan atas kiri bawah ke 0, dan atur margin otomatis. Keuntungan dari opsi ini adalah scrollbar yang berfungsi induk, jika yang terakhir memiliki lebar dan tinggi 100%. Kerugian dari metode ini adalah pengaturan dimensi yang kaku.

Induk ( lebar: 100%; tinggi: 100%; posisi: absolut; atas: 0; kiri: 0; luapan: otomatis; ) .block ( lebar: 250 piksel; tinggi: 250 piksel; posisi: absolut; atas: 0; kanan: 0; bawah: 0; kiri: 0; margin: otomatis; img (lebar maksimal: 100%; tinggi: otomatis; tampilan: blok; margin: 0 otomatis; batas: tidak ada; )

Opsi 3. Tabel.

Mari kita bertanya induk gaya tabel, sel induk Atur perataan teks ke tengah. A memblokir kami mengatur model blok garis. Kerugian yang kami dapatkan adalah scrollbar yang tidak berfungsi, dan secara umum estetika “emulasi” tabel kurang baik.

Induk ( lebar: 100%; tinggi: 100%; tampilan: tabel; posisi: absolut; atas: 0; kiri: 0; > .inner ( tampilan: sel tabel; perataan teks: tengah; perataan vertikal: tengah; ) ) .block ( tampilan: blok-sebaris; img ( tampilan: blok; batas: tidak ada; ) )

Untuk menambahkan gulir ke contoh ini, Anda harus menambahkan satu elemen lagi ke desain.
Contoh: jsfiddle.net/serdidg/fk5nqh52/3.

Opsi 4. Elemen semu.

Opsi ini tidak memiliki semua masalah yang tercantum dalam metode sebelumnya, dan juga menyelesaikan masalah awal. Intinya adalah itu induk mengatur gaya elemen semu sebelumnya yaitu tinggi 100%, center aligment dan model blok inline. Sama halnya dengan memblokir model blok garis diatur, terpusat. Ke memblokir tidak "jatuh" ke bawah elemen semu, ketika dimensi yang pertama lebih besar dari induk, tunjukkan induk spasi putih: nowrap dan ukuran font: 0, setelah itu memblokir batalkan gaya ini dengan yang berikut - spasi: normal. Dalam contoh ini, font-size: 0 diperlukan untuk menghilangkan spasi di antaranya induk Dan memblokir karena pemformatan kode. Ruang tersebut dapat dihilangkan dengan cara lain, tetapi yang terbaik adalah menghindarinya.

Induk ( lebar: 100%; tinggi: 100%; posisi: absolut; atas: 0; kiri: 0; luapan: otomatis; spasi putih: nowrap; perataan teks: tengah; ukuran font: 0; &:sebelum ( tinggi: 100%; tampilan: blok sebaris; perataan vertikal: tengah; konten: "";

Atau, jika Anda memerlukan induk untuk hanya mengambil tinggi dan lebar jendela, dan bukan seluruh halaman:

Induk ( posisi: tetap; atas: 0; kanan: 0; bawah: 0; kiri: 0; luapan: otomatis; spasi putih: nowrap; perataan teks: tengah; ukuran font: 0; &:sebelum ( tinggi: 100%; tampilan: blok sebaris; perataan vertikal: tengah; konten: "";

Opsi 5. Kotak Fleksibel.

Salah satu cara paling sederhana dan elegan adalah dengan menggunakan flexbox. Ini tidak memerlukan gerakan tubuh yang tidak perlu, menggambarkan dengan jelas esensi dari apa yang terjadi, dan sangat fleksibel. Satu-satunya hal yang perlu diingat ketika memilih metode ini adalah dukungan untuk IE mulai dari versi 10 inklusif. caniuse.com/#feat=flexbox

Induk ( lebar: 100%; tinggi: 100%; posisi: tetap; atas: 0; kiri: 0; tampilan: fleksibel; align-items: center; align-content: center; justify-content: center; overflow: auto; ) .block ( latar belakang: #60a839; img ( tampilan: blok; batas: tidak ada; ) )

Opsi 6. Transformasi.

Cocok jika kita dibatasi oleh struktur, dan tidak ada cara untuk memanipulasi elemen induk, namun bloknya perlu diselaraskan. Fungsi css Translate() akan membantu. Nilai positioning absolut 50% akan memposisikan sudut kiri atas blok tepat di tengah, kemudian nilai translasi negatif akan memindahkan blok relatif terhadap dimensinya sendiri. Harap diperhatikan bahwa efek negatif mungkin muncul dalam bentuk tepi buram atau gaya font. Selain itu, metode ini dapat menyebabkan masalah dalam menghitung posisi blok menggunakan java-script. Terkadang, untuk mengkompensasi hilangnya 50% lebar karena penggunaan properti kiri CSS, aturan yang ditentukan untuk blok dapat. bantuan: margin-kanan: -50%;

Induk ( lebar: 100%; tinggi: 100%; posisi: tetap; atas: 0; kiri: 0; luapan: otomatis; ) .block ( posisi: absolut; atas: 50%; kiri: 50%; transform: terjemahkan( -50%, -50%); img ( tampilan: blok; ) )

Opsi 7. Tombol.

Opsi azproduction pengguna di mana memblokir dibingkai dalam tag tombol. Tombol mempunyai sifat memusatkan segala sesuatu yang ada di dalamnya, yaitu elemen model inline dan block-line (inline-block). Dalam praktiknya saya tidak menyarankan menggunakannya.

Induk ( lebar: 100%; tinggi: 100%; posisi: absolut; atas: 0; kiri: 0; luapan: otomatis; latar belakang: tidak ada; batas: tidak ada; garis besar: tidak ada; ) .block ( display: inline-block; img (tampilan: blok;; batas: tidak ada; ) )

Bonusnya

Dengan menggunakan ide opsi ke-4, Anda dapat mengatur margin eksternal memblokir, dan yang terakhir akan cukup ditampilkan dikelilingi oleh scrollbar.
Contoh: jsfiddle.net/serdidg/nfqg9rza/2.

Anda juga dapat menyelaraskan gambar ke tengah, dan jika gambarnya lebih besar induk, skalakan ke ukuran induk.
Contoh: jsfiddle.net/serdidg/nfqg9rza/3.
Contoh dengan gambar besar:

Saat menata halaman, sering kali perlu melakukan perataan tengah menggunakan metode CSS: misalnya, memusatkan blok utama. Ada beberapa opsi untuk memecahkan masalah ini, yang masing-masing cepat atau lambat harus digunakan oleh perancang tata letak mana pun.

Perataan teks tengah

Seringkali, untuk tujuan dekoratif, teks perlu diatur ke perataan tengah; CSS dalam hal ini memungkinkan Anda mengurangi waktu tata letak. Sebelumnya, hal ini dilakukan dengan menggunakan atribut HTML, tetapi sekarang standar tersebut mengharuskan teks disejajarkan menggunakan style sheet. Tidak seperti blok, yang marginnya perlu diubah, dalam CSS, pemusatan teks dilakukan menggunakan satu baris:

  • perataan teks:tengah;

Harta ini diwariskan dan diwariskan dari orang tua kepada seluruh keturunannya. Mempengaruhi tidak hanya teks, tetapi juga elemen lainnya. Untuk melakukan ini, mereka harus inline (misalnya, span) atau inline-block (blok apa pun yang memiliki kumpulan properti display: block). Opsi terakhir juga memungkinkan Anda mengubah lebar dan tinggi elemen serta menyesuaikan indentasi dengan lebih fleksibel.

Seringkali di halaman, penyelarasan ditetapkan ke tag itu sendiri. Ini segera membuat kode menjadi tidak valid, karena W3C tidak lagi menggunakan atribut align. Tidak disarankan menggunakannya pada halaman.

Menyelaraskan blok ke tengah

Jika Anda perlu memusatkan div, CSS menawarkan cara yang cukup mudah: menggunakan margin. Indentasi dapat diatur untuk elemen blok dan elemen blok sebaris. Nilai properti harus 0 (padding vertikal) dan auto (padding horizontal otomatis):

  • margin:0 otomatis;

Sekarang opsi ini diakui benar-benar valid. Menggunakan padding eksternal juga memungkinkan Anda mengatur gambar agar berada di tengah: ini memungkinkan Anda menyelesaikan banyak masalah terkait posisi elemen pada halaman.

Sejajarkan blok ke kiri atau ke kanan

Terkadang perataan tengah CSS tidak diperlukan, tetapi Anda perlu menempatkan dua blok berdampingan: satu di tepi kiri, yang lain di kanan. Untuk tujuan ini, terdapat properti float, yang dapat mengambil salah satu dari tiga nilai: kiri, kanan, atau tidak sama sekali. Katakanlah Anda memiliki dua balok yang perlu ditempatkan berdampingan. Maka kodenya akan menjadi seperti ini:

  • .kiri (mengapung:kiri;)
  • .kanan(mengambang:kanan)

Jika ada juga blok ketiga yang harus ditempatkan di bawah dua blok pertama (misalnya footer), maka perlu diberi properti clear :

  • .kiri (mengapung:kiri;)
  • .kanan(mengambang:kanan)
  • footer (hapus: keduanya)

Faktanya adalah bahwa blok dengan kelas kiri dan kanan keluar dari aliran umum, yaitu semua elemen lainnya mengabaikan keberadaan elemen yang selaras. Properti clear:both memungkinkan footer atau blok lainnya melihat elemen yang keluar dari aliran dan melarang float di kiri dan kanan. Oleh karena itu, dalam contoh kita, footer akan bergerak ke bawah.

Penjajaran vertikal

Ada kalanya mengatur perataan tengah menggunakan metode CSS saja tidak cukup; Anda juga perlu mengubah posisi vertikal blok anak. Elemen inline atau inline-block apa pun dapat disarangkan di tepi atas atau bawah, di tengah elemen induk, atau di lokasi mana pun. Paling sering, blok perlu disejajarkan ke tengah; untuk ini, atribut perataan vertikal digunakan. Katakanlah ada dua blok, yang satu bersarang di dalam blok yang lain. Dalam hal ini, blok dalam adalah elemen blok sebaris (tampilan: blok sebaris). Anda perlu menyelaraskan blok anak secara vertikal:

  • perataan atas - .child(vertical-align:top);
  • perataan tengah - .child(vertical-align:middle);
  • perataan bawah - .child(vertical-align:bottom);

Baik perataan teks maupun perataan vertikal tidak memengaruhi elemen blok.

Kemungkinan masalah dengan blok yang selaras

Terkadang memusatkan div menggunakan CSS dapat menimbulkan sedikit masalah. Misalnya, saat menggunakan float: misalkan ada tiga blok: .first, .second, dan .third. Blok kedua dan ketiga terletak di blok pertama. Elemen dengan kelas kedua diratakan ke kiri, dan blok terakhir diratakan ke kanan. Setelah mendatar, keduanya terjatuh dari arus. Jika elemen induk tidak memiliki ketinggian yang ditetapkan (misalnya, 30em), maka elemen tersebut tidak akan lagi meregang hingga ketinggian blok turunannya. Untuk menghindari kesalahan ini, gunakan "spacer" - blok khusus yang melihat .second dan .third. Kode CSS:

  • .detik(mengambang:kiri)
  • .ketiga(mengambang:kanan)
  • .clearfix(tinggi:0; jelas: keduanya;)

Pseudo-class:after sering digunakan, yang juga memungkinkan Anda mengembalikan blok ke tempatnya dengan membuat pseudo-spacer (dalam contoh, div dengan kelas container terletak di dalam.pertama dan berisi.kiri dan.kanan) :

  • .kiri(mengambang:kiri)
  • .kanan(mengambang:kanan)
  • .container:after(content:""; tampilan:tabel; jelas:keduanya;)

Opsi di atas adalah yang paling umum, meski ada beberapa variasi. Anda selalu dapat menemukan cara paling sederhana dan nyaman untuk membuat pseudo-spacer melalui eksperimen.

Masalah lain yang sering dihadapi oleh desainer tata letak adalah penyelarasan elemen blok sebaris. Sebuah spasi secara otomatis ditambahkan setelah masing-masingnya. Properti margin, yang disetel ke indentasi negatif, membantu mengatasi hal ini. Ada metode lain yang lebih jarang digunakan: misalnya, zeroing. Dalam hal ini, font-size: 0 ditulis di properti elemen induk. Jika ada teks di dalam blok, maka ukuran font yang diperlukan sudah dikembalikan di properti elemen blok sebaris. Misalnya, ukuran font:1em. Metode ini tidak selalu nyaman, jadi opsi dengan indentasi eksternal lebih sering digunakan.

Menyelaraskan blok memungkinkan Anda membuat halaman yang indah dan fungsional: ini termasuk tata letak keseluruhan, penataan produk di toko online, dan foto di situs web kartu nama.

  • CSS
  • HTML

    • 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.
    Sebagai ilustrasi, perhatikan contoh berikut.

    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 eksternal dan internal 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? Masalahnya adalah properti perataan vertikal 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.

    Penyelarasan menggunakan tabel

    Solusi pertama yang terlintas dalam pikiran adalah mengganti blok terluar dengan tabel satu sel. Dalam hal ini, perataan akan diterapkan pada isi sel, yaitu pada blok dalam.


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

    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.

    Penyelarasan menggunakan lekukan

    Apabila tinggi balok dalam dan balok luar diketahui, maka penyelarasannya dapat diatur dengan menggunakan indentasi vertikal balok dalam dengan rumus: (H luar – H dalam) / 2.

    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.

    Penyelarasan menggunakan ketinggian garis

    Jika Anda tahu bahwa blok dalam tidak boleh menempati lebih dari satu baris teks, maka Anda dapat menggunakan properti line-height dan mengaturnya sama dengan tinggi blok luar. Karena konten blok dalam tidak boleh digabungkan ke baris kedua, disarankan untuk juga menambahkan aturan white-space: nowrap dan overflow:hidden.

    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.

    Penyelarasan menggunakan "peregangan"

    Cara ini dapat digunakan apabila tinggi balok luar tidak diketahui, tetapi tinggi balok dalam diketahui.

    Untuk melakukan ini, Anda perlu:

    1. mengatur posisi relatif ke blok luar, dan posisi absolut ke blok dalam;
    2. tambahkan aturan atas: 0 dan bawah: 0 ke balok dalam, sehingga akan meregang hingga seluruh ketinggian balok luar;
    3. atur bantalan vertikal blok dalam ke otomatis.
    .outer ( posisi: relatif; ) .inner ( tinggi: 100px; posisi: absolut; atas: 0; bawah: 0; margin: otomatis 0; )
    http://jsfiddle.net/c1bgfffq/4/

    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 .

    Penyelarasan dengan margin-atas negatif

    Cara ini sudah dikenal luas dan sangat sering digunakan. Seperti yang sebelumnya, digunakan ketika tinggi balok terluar tidak diketahui, tetapi tinggi balok dalam diketahui.

    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.

    Penyelarasan dengan transformasi

    Cara ini mirip dengan cara sebelumnya, tetapi dapat digunakan bila ketinggian unit dalam-ruang tidak diketahui. Dalam hal ini, alih-alih menyetel padding piksel negatif, Anda dapat menggunakan properti transform dan memindahkan blok bagian dalam ke atas menggunakan fungsi TranslateY dan nilai -50% .

    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.

    Penyelarasan dengan Flexbox

    Cara penyelarasan vertikal yang paling modern adalah dengan menggunakan Tata Letak Kotak Fleksibel (dikenal sebagai Flexbox). Modul ini memungkinkan Anda mengontrol posisi elemen pada halaman secara fleksibel, mengaturnya hampir di mana saja. Penyelarasan tengah untuk Flexbox adalah tugas yang sangat sederhana.

    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.

    Metode mana yang harus saya pilih?

    Anda harus mulai dari pernyataan masalah:
    • 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.

    Ada beberapa cara yang berbeda secara mendasar untuk memusatkan objek secara vertikal menggunakan CSS, namun memilih yang tepat bisa jadi rumit. Kami akan melihat beberapa di antaranya, dan juga membuat website kecil menggunakan pengetahuan yang diperoleh.

    Perataan tengah vertikal tidak mudah dicapai dengan menggunakan CSS. Ada banyak cara dan tidak semuanya berfungsi di semua browser. Mari kita lihat 5 metode berbeda serta kelebihan dan kekurangan masing-masing metode. Contoh.

    metode pertama

    Metode ini mengasumsikan bahwa kita menyetel beberapa elemen

    metode tampilan sebagai tabel, setelah itu kita dapat menggunakan properti perataan vertikal di dalamnya (yang berfungsi berbeda di elemen berbeda).

    Beberapa informasi berguna yang harus dipusatkan.
    #wrapper( tampilan: tabel; ) #sel( tampilan: sel-tabel; perataan vertikal: tengah; )

    Kelebihan

    • Konten dapat mengubah ketinggian secara dinamis (tinggi tidak ditentukan dalam CSS).
    • Konten tidak terpotong jika tidak ada cukup ruang untuk itu.

    Kontra

    • Tidak berfungsi di IE 7 atau kurang
    • Banyak tag bersarang

    metode ke-2

    Metode ini menggunakan pemosisian absolut div, dengan top disetel ke 50% dan margin-top dikurangi setengah tinggi konten. Ini menyiratkan bahwa objek harus memiliki ketinggian tetap, yang ditentukan dalam gaya CSS.

    Karena tingginya tetap, Anda dapat mengatur overflow:auto; untuk div yang berisi konten, sehingga jika konten tidak sesuai, bilah gulir akan muncul.

    Konten Di Sini
    #content ( posisi: absolut; atas: 50%; tinggi: 240 piksel; margin-atas: -120 piksel; /* dikurangi setengah tinggi */ )

    Kelebihan

    • Bekerja di semua browser.
    • Tidak ada sarang yang tidak perlu.

    Kontra

    • Ketika tidak ada cukup ruang, konten akan hilang (misalnya, div ada di dalam badan dan pengguna telah memperkecil jendela, dalam hal ini bilah gulir tidak akan muncul.

    metode ke-3

    Dalam metode ini, kita akan menggabungkan div konten dengan div lain. Mari kita atur tingginya menjadi 50% (tinggi: 50%;), dan margin bawah menjadi setengah tingginya (margin-bottom:-contentheight;). Konten akan jelas mengambang dan berada di tengah.

    inilah isinya
    #floater( float: kiri; tinggi: 50%; margin-bawah: -120px; ) #content( hapus: keduanya; tinggi: 240px; posisi: relatif; )

    Kelebihan

    • Bekerja di semua browser.
    • Jika tidak ada cukup ruang (misalnya, saat jendela diperkecil), konten tidak terpotong, bilah gulir akan muncul.

    Kontra

    • Saya hanya dapat memikirkan satu hal: elemen kosong tambahan sedang digunakan.

    metode ke-4.

    Metode ini menggunakan properti position:absolute; untuk div dengan dimensi tetap (lebar dan tinggi). Lalu kita atur koordinatnya top:0; bawah:0; , tetapi karena tingginya tetap, ia tidak dapat meregang dan sejajar dengan tengah. Ini sangat mirip dengan metode terkenal dalam memusatkan elemen blok dengan lebar tetap secara horizontal (margin: 0 otomatis;).

    Informasi penting.
    #content( posisi: absolut; atas: 0; bawah: 0; kiri: 0; kanan: 0; margin: otomatis; tinggi: 240 piksel; lebar: 70%; )

    Kelebihan

    • Sangat sederhana.

    Kontra

    • Tidak berfungsi di Internet Explorer
    • Konten akan terpotong tanpa bilah gulir jika tidak ada cukup ruang di penampung.

    metode ke-5

    Dengan menggunakan metode ini, Anda dapat meratakan satu baris teks ke tengah. Kita cukup mengatur tinggi teks (line-height) sama dengan tinggi elemen (height). Setelah ini, garis akan ditampilkan di tengah.

    Beberapa baris teks
    #content( tinggi: 100px; tinggi garis: 100px; )

    Kelebihan

    • Bekerja di semua browser.
    • Tidak memotong teks jika tidak pas.

    Kontra

    • Hanya berfungsi dengan teks (tidak berfungsi dengan elemen blok).
    • Jika ada lebih dari satu baris teks, tampilannya sangat buruk.

    Cara ini sangat berguna untuk elemen kecil, seperti memusatkan teks pada tombol atau kolom teks.

    Sekarang Anda tahu cara mencapai perataan tengah vertikal, mari buat situs web sederhana yang akan terlihat seperti ini:

    Langkah 1

    Itu selalu baik untuk memulai dengan markup semantik. Halaman kami akan disusun sebagai berikut:

    • #floater (untuk memusatkan konten)
    • #centred (elemen pusat)
      • #samping
        • #logo
        • #nav (daftar
        • #isi
      • #bottom (untuk hak cipta dan sebagainya)

      Mari kita tulis markup html berikut:

      Perusahaan yang Terpusat

      Judul Halaman

      Merekayasa ulang outsourcing yang bernilai tambah secara holistik setelah kolaborasi yang berpusat pada proses dan berbagi ide.

      Menyederhanakan pasar khusus yang berdampak secara penuh semangat melalui keharusan yang diaktifkan. Mendominasi inovasi premium secara holistik setelah skenario yang menarik. Merebut kembali standar tinggi sumber daya manusia dengan produk-produk manufaktur terdepan. Secara khusus sindikasikan skema yang mematuhi standar sebelum vortal yang kuat. Secara unik merekap ulang kesiapan web yang dimanfaatkan dengan informasi yang siap pakai.

      Judul 2

      Secara efisien merangkul kesiapan web yang disesuaikan daripada proses yang diarahkan oleh pelanggan. Mengembangkan kepentingan lintas platform secara tegas dibandingkan dengan teknologi proaktif. Memberdayakan layanan meta multidisiplin dengan mudah tanpa antarmuka di seluruh perusahaan.

      Sederhanakan area tema strategis kompetitif dengan mudah dengan pasar elektronik yang terfokus. Sindikat fosfluoresen komunitas kelas dunia berhadapan dengan pasar dengan nilai tambah. Menemukan kembali layanan holistik dengan tepat sebelum layanan elektronik yang kuat.

      Pemberitahuan hak cipta ada di sini

      Html, body ( margin: 0; padding: 0; tinggi: 100%; ) body ( latar belakang: url("page_bg.jpg") 50% 50% tanpa pengulangan #FC3; font-family: Georgia, Times, serif; ) #floater ( posisi: relatif; float: kiri; tinggi: 50%; margin-bawah: -200px; lebar: 1px; ) #centered ( posisi: relatif; jelas: kiri; tinggi: 400px; lebar: 80%; maks -lebar: 800px; lebar minimum: 400px; margin: 0 otomatis; batas: 4px solid #666; ) #bawah ( posisi: absolut; bawah: 0; kanan: 0; ) #nav ( posisi: absolut; kiri: 0 ; bawah: 0; bantalan: 20 piksel;

      Sebelum membuat pusat konten kita selaras, kita perlu mengatur tinggi badan dan html menjadi 100%. Karena tinggi dihitung tanpa padding internal dan eksternal (padding dan margin), kita atur (padding) ke 0 sehingga tidak ada scrollbar.

      Margin bawah untuk elemen "floater" sama dengan minus setengah tinggi konten (400px), yaitu -200px ;

      Halaman Anda sekarang akan terlihat seperti ini:

      #lebar elemen terpusat 80%. Hal ini membuat situs kami lebih sempit di layar kecil dan lebih lebar di layar besar. sebagian besar situs terlihat tidak senonoh di monitor lebar baru di sudut kiri atas. Properti min-width dan max-width juga membatasi halaman kita agar tidak terlihat terlalu lebar atau terlalu sempit. Internet Explorer tidak mendukung properti ini. Anda perlu mengaturnya ke lebar tetap.

      Karena elemen #centered memiliki position:relative himpunan, kita dapat menggunakan posisi absolut elemen di dalamnya. Kemudian atur overflow:auto; untuk elemen #content sehingga muncul scrollbar jika konten tidak sesuai.

      Langkah 3

      Hal terakhir yang akan kita lakukan adalah menambahkan beberapa gaya untuk membuat halaman terlihat sedikit lebih menarik. Mari kita mulai dengan menunya.

      #nav ul ( gaya daftar: tidak ada; padding: 0; margin: 20px 0 0 0; indentasi teks: 0; ) #nav li ( padding: 0; margin: 3px; ) #nav li a ( tampilan: blok; warna latar belakang: #e8e8e8; margin: 0; batas bawah: 1px padat: kanan; konten: """; berat font: tebal; float: kanan; margin: 0 2px 0 5px; f8f8f8; warna batas bawah : #777; ) #nav li a:hover::after ( margin: 0 0 0 7px; warna: #f93; ) #nav li a:aktif ( bantalan: 8px 7px 6px 7px; )

      Hal pertama yang kami lakukan untuk membuat menu terlihat lebih baik adalah menghilangkan poin dengan mengatur atribut list-style:none, dan juga mengatur padding dan padding, karena keduanya sangat bervariasi secara default di browser yang berbeda.

      Perhatikan bahwa kami kemudian menetapkan bahwa tautan harus dirender sebagai elemen blok. Sekarang, ketika ditampilkan, mereka direntangkan ke seluruh lebar elemen di mana mereka berada.

      Hal menarik lainnya yang kami gunakan untuk menu adalah kelas semu:sebelum dan:sesudah. Mereka memungkinkan Anda menambahkan sesuatu sebelum dan sesudah elemen. Ini adalah cara yang baik untuk menambahkan ikon atau simbol, seperti panah di akhir setiap tautan. Trik ini tidak berfungsi di Internet Explorer 7 dan yang lebih lama.

      Langkah 4

      Dan yang tak kalah pentingnya, kami akan menambahkan beberapa sekrup pada desain kami untuk menambah keindahan.

      #centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( font-family: Helvetica, Arial, sans- serif; berat font: normal; warna: #666; ) h1 ( warna: #f93; batas bawah: 1px solid #ddd; spasi huruf: -0,05em; berat font: tebal; margin-atas: 0; padding-top: 0; ) #bottom ( padding: 10px; ukuran font: 0,7em; warna: #f03; ) #logo ( ukuran font: 2em; perataan teks: tengah; warna: #999; ) #logo kuat ( font-weight: normal; ) #logo span ( display: block; font-size: 4em; line-height: 0.7em; color: #666; ) p, h2, h3 ( line-height: 1.6em; ) a ( warna: #f03; )

      Dalam gaya ini kami menetapkan sudut membulat untuk elemen #centered. Di CSS3, ini akan dilakukan oleh properti border-radius. Ini belum diterapkan di beberapa browser, selain menggunakan awalan -moz dan -webkit untuk Mozilla Firefox dan Safari/Webkit.

      Kesesuaian

      Seperti yang mungkin sudah Anda duga, sumber utama masalah kompatibilitas adalah Internet Explorer:

      • Elemen #floater harus memiliki lebar yang disetel
      • IE 6 memiliki padding tambahan di sekitar menu

      237152 tampilan

      Vlad Merzhevich

      Karena kenyataan bahwa isi sel tabel dapat disejajarkan secara horizontal dan vertikal secara bersamaan, kemungkinan untuk mengontrol posisi elemen relatif satu sama lain diperluas. Tabel memungkinkan Anda mengatur perataan gambar, teks, bidang formulir, dan elemen lainnya relatif satu sama lain dan halaman web secara keseluruhan. Secara umum, penyelarasan terutama diperlukan untuk membangun hubungan visual antara berbagai elemen, serta mengelompokkannya.

      Pemusatan vertikal

      Salah satu cara untuk menunjukkan kepada pengunjung fokus dan nama situs adalah dengan menggunakan halaman pembuka. Ini adalah halaman pertama yang biasanya berisi layar flash splash atau gambar yang mengungkapkan ide utama situs. Gambar tersebut juga merupakan tautan ke bagian lain situs. Anda perlu menempatkan gambar ini di tengah jendela browser, apa pun resolusi monitornya. Untuk keperluan ini, Anda bisa menggunakan tabel dengan lebar dan tinggi 100% (contoh 1).

      Contoh 1: Memusatkan gambar

      Penyelarasan

      Dalam contoh ini, perataan horizontal diatur menggunakan parameter tag align="center". , dan konten sel mungkin tidak berada di tengah secara vertikal, karena ini adalah posisi default.

      Untuk mengatur tinggi meja menjadi 100%, Anda harus menghapusnya, kode tersebut tidak lagi valid.

      Menggunakan lebar dan tinggi untuk menutupi seluruh area halaman web yang tersedia memastikan bahwa konten tabel akan disejajarkan tepat di tengah jendela browser, berapa pun ukurannya.

      Penjajaran horizontal

      Dengan menggabungkan atribut align (penyelarasan horizontal) dan valign (penyelarasan vertikal) pada tag , diperbolehkan untuk mengatur beberapa jenis posisi elemen relatif satu sama lain. Pada Gambar. Gambar 1 menunjukkan cara untuk menyelaraskan elemen secara horizontal.

      Mari kita lihat beberapa contoh perataan teks sesuai gambar di bawah ini.

      Penjajaran Atas

      Untuk menentukan perataan atas konten sel, untuk sebuah tag Anda perlu mengatur atribut valign dengan nilai top (contoh 2).

      Contoh 2: Menggunakan valign

      Penyelarasan

      Kolom 1 Kolom 2

      Dalam contoh ini, karakteristik sel dikontrol menggunakan parameter tag , namun akan lebih mudah untuk mengubahnya melalui gaya.

      Secara khusus, perataan dalam sel ditentukan oleh properti perataan vertikal dan perataan teks (contoh 3).

      Penyelarasan

      Kolom 1 Kolom 2

      Untuk mempersingkat kode, contoh ini menggunakan pengelompokan pemilih karena properti perataan vertikal dan padding diterapkan ke dua sel secara bersamaan.

      Penyelarasan bawah dilakukan dengan cara yang sama, tetapi alih-alih nilai atas, yang digunakan adalah nilai bawah.

      Penjajaran tengah

      Secara default, konten sel disejajarkan dengan bagian tengah garis vertikalnya, jadi jika kolom memiliki ketinggian yang berbeda, Anda perlu mengatur perataan ke tepi atas.

      Terkadang Anda masih perlu meninggalkan metode perataan aslinya, misalnya saat menempatkan rumus, seperti yang ditunjukkan pada Gambar. 2.

      Dalam hal ini, rumusnya terletak tepat di tengah jendela browser, dan nomornya terletak di tepi kanan. Untuk menyusun elemen dengan cara ini, Anda memerlukan tabel dengan tiga sel. Sel terluar harus memiliki dimensi yang sama, di sel tengah perataannya berada di tengah, dan di sel kanan - di sepanjang tepi kanan (contoh 4). Jumlah sel ini diperlukan untuk memastikan bahwa rumus ditempatkan di tengah.

      Penyelarasan

      (18.6)

      Contoh 4: Penyelarasan Rumus

      Dalam contoh ini, sel pertama tabel dibiarkan kosong; ini hanya berfungsi untuk membuat indentasi, yang juga dapat diatur menggunakan gaya.

      Menyelaraskan Elemen Bentuk

      Dengan menggunakan tabel, akan lebih mudah untuk menentukan posisi bidang formulir, terutama ketika bidang tersebut diselingi dengan teks. Salah satu opsi desain formulir yang dimaksudkan untuk memasukkan komentar ditunjukkan pada Gambar. 3.

      Untuk memastikan bahwa teks di sebelah bidang formulir rata kanan dan elemen formulir itu sendiri rata kiri, Anda memerlukan tabel dengan batas tak terlihat dan dua kolom. Kolom kiri akan berisi teks itu sendiri, dan kolom kanan akan berisi kolom teks (contoh 5).

      Penyelarasan

      Contoh 5: Menyelaraskan Bidang Formulir
      Nama
      E-mail

      Tambahkan komentar

    • Dalam contoh ini, untuk sel yang memerlukan perataan kanan, atribut align="right" ditambahkan.

      Untuk memastikan bahwa label Komentar diposisikan di bagian atas teks multibaris, sel terkait diatur ke rata atas menggunakan atribut valign.