Berpusat: CSS-susun atur

Apabila susun atur halaman yang sering perlu untuk membuat CSS-cara yang berpusat: sebagai contoh, ke tengah unit utama. Terdapat beberapa penyelesaian kepada masalah ini, setiap yang lambat laun akan perlu untuk menggunakan mana-mana alat sandi.

Menjajarkan teks ke pusat

Selalunya untuk tujuan hiasan anda mahu untuk menetapkan teks yang berpusat, CSS dalam kes ini, untuk mengurangkan masa pengenaan. Sebelum ini telah dilakukan dengan menggunakan HTML-sifat, tetapi kini standard yang diperlukan untuk menyelaraskan teks dengan lembaran gaya. Berbeza dengan blok yang mana anda mahu untuk menukar padding luar sejajar CSS teks di tengah-tengah itu dibuat dengan satu baris:

• text-align: center;

Hartanah ini diwarisi dan lulus daripada ibu bapa kepada kanak-kanak. Ia memberi kesan kepada bukan sahaja teks tetapi juga untuk unsur-unsur lain. Untuk tujuan ini, mereka harus huruf kecil (contohnya, span) atau baris-blok (mana-mana blok yang nyatakan harta paparan: blok). Pilihan kedua juga membolehkan anda untuk mengubah lebar dan ketinggian elemen, lebih konfigurasi fleksibel lekukan.

halaman sering menyelaraskan atribut kepada dirinya sendiri tag. Ini serta-merta menjadikan kod yang tidak sah, kerana W3C mengakui sifat align usang. Menggunakannya pada halaman yang tidak digalakkan.

blok berpusat

Jika anda mahu mengeset penjajaran div di tengah-tengah, CSS boleh menawarkan agak selesa: penggunaan margin padding luar. Padding boleh dinyatakan sebagai unsur-unsur blok, dan garis-blok. nilai Svoysva harus 0 (padding menegak), dan auto (lekukan automatik melintang):

• margin: 0 auto;

Pilihan ini kini diiktiraf sebagai benar-benar sah. Menggunakan padding luar juga membolehkan anda untuk menetapkan penjajaran pusat: harta CSS-margin membolehkan kita untuk menyelesaikan banyak masalah yang berkaitan dengan unsur kedudukan pada halaman.

Penjajaran tepi kiri atau kanan blok

Kadang-kadang CSS hala tidak memerlukan penjajaran pusat, tetapi ia adalah perlu untuk meletakkan kedua-dua blok seterusnya, dari ujung kiri dan yang lain - dari kanan. Untuk ini terdapat harta apungan, yang boleh mengambil salah satu daripada tiga nilai: kiri, kanan atau tidak. Katakan anda mempunyai dua blok yang perlu diletakkan sebelah menyebelah. Kemudian kod adalah seperti berikut:

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

Jika terdapat satu blok ketiga, yang mesti terletak di bawah kedua-dua blok pertama (contoh, footer), maka ia adalah perlu untuk mendaftar ciri jelas:

• .left {float: kiri;}
• .right {float: right}
• footer {jelas: kedua-dua}

Hakikat bahawa blok dengan kelas jatuh kiri dan kanan daripada jumlah aliran, iaitu, semua unsur-unsur lain diabaikan kewujudan elemen sejajar. Hartanah jelas: kedua-dua blok membolehkan kaki atau mana-mana kelihatan lain dicetuskan dari sel-sel aliran dan melarang bungkus (float) di kedua-dua kiri dan kanan. Oleh itu, dalam contoh kita, footer disesarkan ke bawah.

penjajaran menegak

Terdapat kes di mana tidak cukup untuk menetapkan penjajaran tengah-tengah CSS-cara, anda juga perlu menukar kedudukan menegak blok kanak-kanak. Mana-mana talian atau baris-blok elemen boleh ditekan terhadap kelebihan atas atau lebih rendah, yang terletak di tengah-tengah elemen induk atau berada di lokasi yang sewenang-wenangnya. Selalunya memerlukan penjajaran pusat blok, ia menggunakan menegak-align atribut. Katakan terdapat dua blok, satu bersarang dalam yang lain. Dalam unit dalaman ini - elemen baris-blok (paparan: inline-block). Ia adalah perlu untuk menyelaraskan kanak-kanak blok menegak:

• penjajaran sempadan atas - .child {vertical-align: top};
• berpusat - .child {vertical-align: pertengahan};
• penjajaran pinggir bawah - .child {vertical-align: bawah};

Pada unsur-unsur blok audio text-align, atau menegak-align tidak terpakai.

masalah yang mungkin dengan unit Jajar

Kadang-kadang div align pusat CSS hala boleh menyebabkan masalah sedikit. Sebagai contoh, apabila menggunakan apungan: sebagai contoh, terdapat tiga blok: .Pertama, .second dan .third. Blok kedua dan ketiga terletak pada yang pertama. Unsur dengan kelas kedua jajar kiri, dan blok terakhir - di sebelah kanan. Selepas menjajarkan dua jatuh dari sungai itu. Jika elemen induk tidak ditakrifkan ketinggian (contohnya, 30em), ia akan berhenti untuk menghulurkan ketinggian unit subsidiari. Untuk mengelakkan kesilapan ini, gunakan "spacer" - satu unit khas, yang melihat .second dan .third. CSS-code:

• .second {terapung: kiri}
• .third {float: right}
• .clearfix {height: 0; jelas: kedua-duanya;}

pseudo sering digunakan: selepas, yang juga membolehkan untuk kembali di blok ke tempat dengan mewujudkan psevdorasporki (dalam contoh di dalam div dengan kelas terletak di dalam bekas dan terdiri daripada .left .Pertama dan .right):

• .left {float: kiri}
• .right {float: right}
• .container: selepas {kandungan: ''; paparan: Jadual; jelas: kedua-duanya;}

Pilihan di atas - yang paling biasa, walaupun terdapat beberapa variasi. Anda sentiasa boleh mencari cara yang paling mudah dan paling mudah untuk mewujudkan psevdorasporki oleh eksperimen.

Satu lagi masalah yang kerap dihadapi layout - penjajaran unsur-unsur barisan blok. Selepas setiap daripada mereka ruang yang ditambah secara automatik. Mengendalikan ia membantu harta margin, yang ditakrifkan oleh lekukan negatif. Ada cara lain, yang digunakan kurang kerap, sebagai contoh, menetapkan semula saiz fon. Dalam kes ini, sifat unsur induk mendaftarkan font-size: 0. Jika terletak di dalam blok teks, sifat-sifat unsur-unsur barisan blok telah kembali kepada saiz font yang dikehendaki. Sebagai contoh, font-size: 1em. Kaedah ini tidak selalunya mudah, jadi ia adalah lebih biasa digunakan versi dengan margin luar.

Menjajarkan blok membolehkan anda untuk membuat laman yang cantik dan berfungsi: susun atur umum dan susun atur, dan lokasi barang-barang di kedai-kedai, dan gambar di atas tapak yang kecil.