Centered: CSS-layout

Ketika tata letak halaman sering diperlukan untuk membuat berpusat CSS-cara: misalnya, ke pusat unit utama. Ada beberapa solusi untuk masalah ini, yang masing-masing cepat atau lambat akan harus menggunakan coder apapun.

Menyelaraskan teks ke pusat

Sering untuk tujuan dekoratif Anda ingin mengatur teks berpusat, CSS dalam hal ini, untuk mengurangi waktu pengenaan. Sebelumnya ini dilakukan dengan menggunakan HTML-atribut, tapi sekarang standar yang diperlukan untuk menyelaraskan teks dengan style sheet. Berbeda dengan blok yang Anda ingin mengubah padding eksternal dalam CSS alignment teks di tengah dibuat dengan satu baris:

• text-align: center;

Properti ini diwariskan dan diteruskan dari orang tua kepada anak-anak. Ini mempengaruhi tidak hanya teks tetapi juga unsur-unsur lain. Untuk tujuan ini, mereka harus huruf kecil (misalnya, rentang) atau baris-blok (setiap blok yang menentukan properti display: block). Opsi terakhir ini juga memungkinkan Anda untuk mengubah lebar dan tinggi dari elemen, lebih konfigurasi yang fleksibel dari lekukan.

halaman sering menyelaraskan atribut dirinya tag. Hal ini langsung membuat kode tidak valid, karena W3C mengakui atribut align usang. Menggunakannya pada halaman tidak dianjurkan.

berpusat blok

Jika Anda ingin mengatur alignment dari div di tengah, CSS dapat menawarkan cara yang cukup nyaman: penggunaan margin bantalan eksternal. Padding dapat ditentukan sebagai elemen blok, dan garis-blok. Nilai Svoysva harus 0 (bantalan vertikal), dan auto (lekukan otomatis horizontal):

• margin: 0 auto;

Sekarang pilihan ini diakui sebagai benar-benar valid. Menggunakan bantalan eksternal juga memungkinkan Anda untuk mengatur alignment dari pusat: properti CSS margin memungkinkan kita untuk memecahkan banyak masalah yang terkait dengan elemen posisi pada halaman.

Penyelarasan tepi kiri atau kanan dari blok

Kadang-kadang CSS-cara tidak memerlukan penyelarasan pusat, tapi perlu untuk menempatkan dua blok berikutnya, satu dari sisi kiri dan yang lain - dari kanan. Untuk ini ada properti float, yang dapat mengambil salah satu dari tiga nilai: kiri, kanan atau tidak. Katakanlah Anda memiliki dua blok yang harus ditempatkan berdampingan. Maka kode tersebut adalah sebagai berikut:

• .left {float: left;}
• .right {float: right}

Jika ada blok ketiga, yang harus berada di bawah dua blok pertama (misalnya, footer), maka perlu untuk mendaftar fitur yang jelas:

• .left {float: left;}
• .right {float: right}
• footer {clear: both}

Fakta bahwa blok dengan kelas kiri dan kanan jatuh dari total aliran, yaitu, semua elemen lain mengabaikan keberadaan elemen selaras. Properti jelas: baik memungkinkan blok footer atau lainnya terlihat diendapkan dari sel-sel aliran dan melarang wrap (float) pada kedua sisi kiri dan kanan. Oleh karena itu, dalam contoh kita, footer dipindahkan ke bawah.

keselarasan vertikal

Ada kasus di mana tidak cukup untuk mengatur alignment dari pusat CSS-cara, Anda juga harus mengubah posisi vertikal blok anak. Setiap baris atau baris-blok elemen dapat menempel tepi atas atau bawah, yang terletak di tengah-tengah elemen induk atau berada di lokasi yang sewenang-wenang. Paling sering memerlukan penyelarasan pusat blok, menggunakan atribut vertical-align. Misalkan ada dua blok, satu bersarang di dalam yang lain. Dalam unit ini dalam ruangan - baris-elemen blok (display: inline-block). Hal ini diperlukan untuk menyelaraskan anak blok vertikal:

• keselarasan dari batas atas - .child {vertical-align: top};
• berpusat - .child {vertical-align: middle};
• keselarasan dari tepi bawah - .child {vertical-align: bottom};

Pada elemen blok audio yang text-align, atau vertical-align tidak berlaku.

Kemungkinan masalah dengan unit selaras

Kadang-kadang div align pusat CSS-cara dapat menyebabkan sedikit kesulitan. Misalnya, ketika menggunakan pelampung: misalnya, ada tiga blok: .first, .second dan .third. Blok kedua dan ketiga terletak pada pertama. Sebuah elemen dengan kelas kedua kiri-blok, dan blok terakhir - di sebelah kanan. Setelah menyelaraskan dua turun dari sungai. Jika elemen induk tidak didefinisikan tinggi (misalnya, 30em), itu akan berhenti untuk meregangkan ketinggian unit anak perusahaan. Untuk menghindari kesalahan ini, gunakan "spacer" - sebuah unit khusus, yang dilihatnya .second dan .third. CSS-code:

• .second {float: kiri}
• .third {float: right}
• .clearfix {height: 0; clear: both;}

semu sering digunakan: setelah, yang juga memungkinkan untuk mengembalikan blok ke tempatnya dengan menciptakan psevdorasporki (dalam contoh di div dengan class terletak di dalam wadah dan terdiri dari .left .first dan .right):

• .left {float: kiri}
• .right {float: right}
• .container: setelah {isi: ''; display: table; clear: both;}

Opsi di atas - yang paling umum, meskipun ada beberapa variasi. Anda selalu dapat menemukan cara termudah dan paling nyaman untuk membuat psevdorasporki oleh eksperimen.

Masalah lain yang sering ditemui tata letak - penyelarasan elemen garis-blok. Setelah masing-masing ruang ditambahkan secara otomatis. Menanganinya membantu properti margin, yang didefinisikan oleh lekukan negatif. Ada cara lain, yang jarang digunakan, misalnya, mengatur ulang ukuran font. Dalam hal ini, sifat-sifat elemen induk register font-size: 0. Jika terletak di dalam blok teks, sifat-sifat unsur line-blok telah kembali ke ukuran font yang diinginkan. Misalnya, font-size: 1em. Metode ini tidak selalu nyaman, sehingga jauh lebih umum digunakan versi dengan margin eksternal.

Menyelaraskan Blok memungkinkan Anda untuk membuat halaman yang indah dan fungsional: tata letak umum dan tata letak, dan lokasi barang di toko-toko, dan foto di situs kecil.