Dipuseurkeun: CSS-perenah

Nalika tata perenah kaca geus mindeng penting keur nyieun hiji dipuseurkeun CSS-cara: contona, ka pusat Unit utama. Aya sababaraha solusi masalah ieu, nu masing-masing sooner atanapi engké kudu make coder nanaon.

Align téks pikeun museur

Mindeng pikeun hiasan rék nyetél téks dipuseurkeun, CSS dina hal ieu, pikeun ngurangan waktu imposition. Saméméhna ieu dipigawé ngagunakeun HTML-atribut, tapi kiwari standar diperlukeun pikeun align téks jeung gaya lambar. Kontras jeung blok nu hayang ngarobah padding éksternal di CSS alignment tina téks di tengah dijieun ku jalur tunggal:

• téks-align: puseur;

sipat ieu diwariskeun sarta lulus ti indungna ka sadaya barudak. Mangaruhan henteu ukur téks tapi ogé pikeun elemen séjén. Pikeun tujuan ieu, maranéhanana kudu aksara leutik (misalna bentang) atanapi baris-block (sagala blok nu nangtukeun sipat tampilan: block). Pilihan dimungkinkeun ogé ngidinan Anjeun pikeun ngarobah lebar tur jangkungna unsur, beuki konfigurasi fléksibel tina indentation nu.

Kaca mindeng align atribut ka dirina tag. Ieu langsung ngajadikeun kode nu sah, saprak W3C dicaritakeun atribut align leungit. Ngagunakeun eta dina kaca teu dianjurkeun.

dipuseurkeun block

Lamun hayang nyetél alignment tina div di tengah, CSS tiasa nawiskeun rada cara nyaman: pamakéan margin padding éksternal. Padding bisa dieusian salaku elemen blok, sarta jalur-block. nilai Svoysva kedah 0 (padding nangtung), sarta otomatis (indentation otomatis horisontal):

• margin: 0 otomatis;

Ayeuna pilihan ieu dipikawanoh salaku pancen sah. Ngagunakeun padding éksternal ogé ngidinan Anjeun pikeun nangtukeun alignment sahiji pusat: sipat CSS-margin ngamungkinkeun urang pikeun ngajawab loba masalah pakait jeung unsur positioning dina kaca.

Alignment tina ujung kénca atawa katuhu tina blok

Kadangkala CSS-jalan teu merlukeun alignment sahiji pusat, tapi kudu nempatkeun dua blok hareup, hiji ti sisi kénca sarta séjén - ti katuhu. Keur kitu aya harta ngambang, anu tiasa nyandak salah sahiji tilu nilai: ditinggalkeun, katuhu atawa nanaon. Hayu urang nyebutkeun anjeun boga dua blok nu kudu ditempatkeun samping ku samping. Lajeng kode teh nyaéta saperti kieu:

• .left {ngambang: ditinggalkeun;}
• .right {ngambang: katuhu}

Mun aya blok katilu, nu kudu ayana di handapeun dua blok munggaran (e.g., footer), mangka perlu ngadaptar fitur jelas:

• .left {ngambang: ditinggalkeun;}
• .right {ngambang: katuhu}
• footer {jelas: duanana}

Kanyataan yén blok jeung kelas tina kenca sareng ka katuhu ragrag kaluar tina total arus, maksudna, sagala elemen séjén dipaliré éta pisan ayana elemen Blok. Sipat jelas: duanana ngamungkinkeun block footer atawa ditingali séjén precipitated ti sél aliran sarta prohibits bungkus (ngambang) dina duanana kénca jeung katuhu. Kituna, dina conto urang, footer kasebut lunta ka handap.

alignment nangtung

Aya kasus dimana teu cukup pikeun ngeset alignment sahiji puseur CSS-cara, Anjeun ogé kudu ngarobah posisi nangtung tina blok anak. Sagala garis atawa sakaligus-block unsur bisa dipencet ngalawan ujung luhur atawa handap, ayana di tengah unsur indungna atawa jadi dina lokasi wenang. Paling mindeng merlukeun alignment sahiji puseur blok, eta perkara migunakeun atribut nangtung-align. Anggap aya dua blok, salah nested dina lianna. Dina Unit ieu indoor - Baris-block unsur (tampilan: inline-block). Perlu align anak block nangtung:

• alignment tina wates luhur - .child {nangtung-align: top};
• dipuseurkeun - .child {nangtung-align: tengah};
• alignment tina ujung handap - .child {nangtung-align: handap};

Di elemen block audio téks-align, atawa vertikal-align henteu nerapkeun.

Mungkin masalah sareng unit Blok

Kadangkala div align puseur CSS-jalan bisa ngabalukarkeun gangguan saeutik. Contona, nalika maké ngambang a: contona, aya tilu blok: .first, .second na .third. Blok kadua jeung katilu tempatna aya di hareup. Unsur kalawan kelas kadua ditinggalkeun-Blok, jeung blok panungtungan - nu bener. Saatos aligning dua turun tina stream teh. Mun unsur indungna henteu diartikeun jangkungna (misalna 30em), eta baris cease ka manteng jangkungna unit cabangna. Ulah aya kasalahan ieu, nganggo "spacer" - hiji Unit husus, anu nilik .second na .third. CSS-kode:

• .second {ngambang: kénca}
• .third {ngambang: katuhu}
• .clearfix {jangkungna: 0; jelas: duanana;}

pseudo mindeng dipaké: sanggeus, nu ogé ngamungkinkeun pikeun balik blok kana tempat ku nyieun psevdorasporki (dina conto di div kalawan kelas perenahna di jero wadah jeung ngandung hiji .left .first na .right):

• .left {ngambang: kénca}
• .right {ngambang: katuhu}
• .container: sanggeus {eusi: ''; tampilan: méja; jelas: duanana;}

Pilihan luhur - paling umum, sanajan aya sababaraha variasi. Anjeun salawasna bisa manggihan cara panggampangna tur pangmerenahna pikeun nyieun psevdorasporki ku percobaan.

masalah sejen remen encountered perenah - alignment sahiji elemen garis-block. Sanggeus unggal sahijina spasi ieu ditambahkeun sacara otomatis. Nanganan eta mantuan harta margin, nu dihartikeun ku indentation négatip. Aya cara nu sejen, nu dipaké kirang remen, contona, ngareset ukuran font. Dina hal ieu, sipat unsur indungna registers font-ukuran: 0. Mun ayana dina blok tulisan, sipat elemen garis-block geus balik ka ukuran font nu dipikahoyong. Contona, font-ukuran: 1em. métode teu salawasna merenah, jadi eta geus leuwih ilahar dipake Vérsi kalawan margins éksternal.

Aligning blok ngidinan Anjeun pikeun nyieun kaca geulis tur fungsi: tata perenah umum sarta perenah, jeung lokasi barang di toko, sarta poto dina loka ngeunaan hiji leutik.