fit pada halaman sering diperlukan untuk membuat pusat keselarasan CSS-cara: misalnya, ke pusat unit utama.Ada beberapa solusi untuk masalah ini, yang masing-masing cepat atau lambat akan harus menggunakan coder apapun.
Align teks berpusat
sering untuk tujuan dekoratif Anda ingin mengatur perataan teks dari pusat, CSS dalam hal ini, mengurangi waktu dari pengenaan.Sebelumnya, hal ini dilakukan dengan menggunakan HTML-atribut, sekarang standar membutuhkan menyelaraskan teks dengan menggunakan style sheet.Berbeda dengan blok yang Anda ingin mengubah margin luar, dengan perataan teks CSS di tengah dibuat dengan satu baris:
- text-align: center;Properti
ini diwariskan dan diteruskan dari orang tua kepada semua anak.Ini mempengaruhi tidak hanya teks, tetapi juga unsur-unsur lain.Untuk melakukan ini, mereka harus dalam huruf kecil (misalnya, rentang) atau garis-blok (blok yang menetapkan setiap tampilan properti: block).Opsi terakhir juga memungkinkan Anda untuk mengubah lebar dan tinggi dari konfigurasi yang lebih fleksibel lekukan.
Seringkali halaman menyelaraskan atribut untuk tag itu sendiri.Ini segera membuat kode yang tidak valid sebagai W3C mengakui atribut align usang.Penggunaannya tidak dianjurkan pada halaman.
keselarasan blok di pusat
Jika Anda ingin menentukan keselarasan dari pusat div, CSS dapat menawarkan cara yang cukup mudah: penggunaan margin lekukan eksternal.Padding dapat diatur sebagai elemen blok-tingkat dan garis-blok.Nilai Svoysva harus ditetapkan ke 0 (menjorok vertikal) dan auto (indentasi horisontal otomatis):
- margin: 0 auto;
Sekarang pilihan ini diakui sebagai benar-benar valid.Menggunakan bantalan eksternal juga memungkinkan Anda untuk menentukan keselarasan dari pusat: properti CSS margin memungkinkan kita untuk memecahkan banyak masalah yang terkait dengan elemen posisi pada halaman.
Sejajarkan blok di tepi kiri atau kanan
Kadang-kadang pusat keselarasan CSS-cara tidak diperlukan, tetapi perlu untuk menempatkan dua unit sebelah satu dari sisi kiri dan lainnya - dari kanan.Untuk properti ini ada pelampung, yang dapat mengambil salah satu dari tiga nilai: kiri, kanan, atau tidak.Katakanlah Anda memiliki dua unit yang perlu disatukan.Maka kode akan:
- .left {float: left;}
- .right {float: right}
Jika ada unit ketiga, yang harus ditempatkan di bawah dua blok pertama (misalnya, footer), iaAnda harus mendaftarkan properti yang jelas:
- .left {float: left;}
- .right {float: right}
- footer {clear: both}
fakta bahwa blok dengan kelas kiri dan jatuh langsung dari totalmengalir, yaitu, semua elemen lain mengabaikan keberadaan elemen selaras.Properti jelas: baik memungkinkan footer atau unit lain untuk lihat turun dari unsur-unsur aliran dan melarang wrap (float) pada kedua sisi kiri dan kanan.Oleh karena itu, dalam contoh kita, footer akan bergeser ke bawah.
vertikal keselarasan
Ada kasus di mana pusat set cukup keselarasan CSS-cara, Anda harus tetap mengubah posisi vertikal blok anak.Setiap baris atau line-blok elemen dapat menempel tepi atas atau bawah, yang terletak di tengah-tengah elemen induk, atau berada di tempat manapun.Lebih sering membutuhkan penyelarasan kotak di tengah, atribut ini digunakan vertical-align.Misalkan ada dua unit, satu di dalam yang lain.Unit internal - unsur garis-blok (display: inline-block).Hal ini diperlukan untuk menyelaraskan unit vertikal anak:
- keselarasan pada batas atas - .child {vertical-align: top};Pusat
- keselarasan - .child {vertical-align: middle};
- keselarasan di bawah akhir - .child {vertical-align: bottom};
pada unsur-unsur blok-tingkat atau text-align, atau vertical-align tidak berlaku.
Kemungkinan masalah dengan unit aligned
Terkadang div align pusat CSS-cara dapat menyebabkan masalah kecil.Misalnya, menggunakan float: misalnya, ada tiga blok: .first, .second dan .third.Blok kedua dan ketiga berada di pertama.Sebuah elemen dengan kelas kedua blok kiri-blok, dan yang terakhir - di sebelah kanan.Setelah menyelaraskan dua jatuh dari sungai.Jika orangtua tidak didefinisikan tinggi (misalnya, 30em), tidak akan lagi 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;}
sering digunakan semu: setelah, yang juga memungkinkan Anda untuk kembali ke blok ke tempat dengan menciptakan psevdorasporki (dalam contoh ini dalam div dengan kelas wadah terletak dalam .first dan berisi .left dan .right):
- .meninggalkan {float: kiri}
- .right {float: right}
- .container: setelah {isi: '';display: table;clear: both;}
atas pilihan - yang paling umum, meskipun ada beberapa variasi.Anda selalu dapat menemukan cara termudah dan paling nyaman untuk membuat psevdorasporki oleh eksperimen.
Masalah lain tata letak sering ditemui - penyelarasan elemen garis-blok.Setelah masing-masing ruang otomatis ditambahkan.Untuk mengatasi ini membantu marjin properti, yang didefinisikan oleh lekukan negatif.Ada metode lain yang lebih jarang digunakan, misalnya, ulang ukuran font.Dalam hal ini, sifat-sifat orangtua yang ditentukan font-size: 0.Jika berada dalam blok teks, sifat-sifat unsur line-blok telah kembali ke ukuran yang diinginkan.Sebagai contoh, font-size: 1em.Metode ini tidak selalu nyaman, pilihan dengan margin eksternal jauh lebih sering digunakan.
keselarasan blok memungkinkan Anda untuk membuat indah dan fungsional tata letak halaman dan itu adalah tata letak umum dan lokasi barang di toko-toko, dan foto di situs web kecil.
