Центар за усогласување: распоред на CSS

Кога правите страница, често треба да се усогласат во центарот со метод CSS: на пример, центрирајте го главниот дел. Постојат неколку начини за решавање на овој проблем, од кои секоја порано или подоцна треба да се користи од било кој распоред дизајнер.

Израмни го текстот во центарот

Често, за декоративни цели, треба да го поставите текстот до центарот, CSS во овој случај ви овозможува да го намалите времето на изгледот. Претходно, ова беше направено со користење на HTML атрибути, но сега стандардот бара да го усогласите текстот со помош на стилски листови. За разлика од блоковите, за кои треба да ги промените надворешните алишта, во CSS, текстот е центриран на центарот користејќи една линија:

• Порамнување на текст: центар;

Ова својство е наследено и пренесено од родителот на сите потомци. Влијае не само на текстот туку и на другите елементи. За да го направите ова, тие мора да бидат мали букви (на пример, распон) или линија-блок (сите блокови на кои е поставено екранот: блок сопственост). Втората опција исто така ви овозможува да ја промените ширината и висината на елементот, таа е пофлексибилна за да ја прилагодите вовлекувањето.

Често на порамнување на страници се припишува самата ознака. Ова веднаш го прави кодот валиден, бидејќи W3C го призна атрибутот за усогласување како застарен. Користењето на страницата не се препорачува.

Порамнете го блокот до центарот

Ако сакате да го поставите усогласувањето на divто со центарот, CSS може да понуди прилично лесен начин: користење маргина на надворешни маргини. Идентификациите може да се доделуваат и за блок-елементите, и за оние со ред-по-блок. Вредноста на имотот мора да ги земе вредностите 0 (вертикални вертикали) и автоматски (автоматски алишта хоризонтално):

• Маргина: 0 авто;

Сега оваа опција е признаена како апсолутно валидна. Употребата на надворешни алишта исто така ви овозможува да поставите усогласување на сликата во центарот: маргината на имот на CSS овозможува да се решат многу проблеми поврзани со позиционирање елемент на страницата.

Порамнете го блокот налево или на десниот раб

Понекогаш не треба да се усогласувате во центарот со методот CSS, но треба да ставите два блока рамо до рамо: еден од левиот раб, а другиот од десната страна. За ова, има својство на float, кое може да потрае една од трите вредности: лево, десно или никакво. Да речеме дека имате два блока, кои треба да се постават рамо до рамо. Тогаш кодот ќе биде:

• .left {float: left;}
• . Право {float: right}

Ако има и трета блок, кој треба да се наоѓа под првите два блока (на пример, подножјето), тогаш треба да го поставите јасното својство:

• .left {float: left;}
• . Право {float: right}
• Подножје (јасно: и двете)

Прашањето е дека блоковите со класа лево и десно испаѓаат од општите протоци, односно сите други елементи го игнорираат самото постоење на подредените елементи. Јасно: и имотот дозволува подножјето или кој било друг блок да ги види елементите што се испуштаат од протокот и спречува плови од двете лево и десно. Затоа, во нашиот пример, подножјето ќе се движи надолу.

Вертикално усогласување

Постојат моменти кога не е доволно да го поставите центрираното усогласување во CSS-методите, сепак треба да ја смените вертикалната положба на детскиот блок. Секој елемент или блок-елемент може да се притисне до горниот или долниот раб, да биде во средината на родителскиот елемент или да биде на произволно место. Најчесто, треба да го израмните блокот до центарот, користејќи го атрибутот вертикално-усогласување. Да претпоставиме дека постојат два блока, еден е вгнезден во другиот. Во овој случај, внатрешниот блок е елемент со ред-блок (екран: inline-block). Мора да го усогласите блокот за деца вертикално:

• Усогласување на горната граница - .child {vertical-align: top};
• Порамнување на центарот - .child {вертикална-порамнување: средината};
• Усогласување на долната граница - .child {vertical-align: bottom};

Блокирајте ги елементите ниту со порамнување на текст ниту со вертикална функција.

Можни проблеми со подредени блокови

Понекогаш усогласувањето на дивите околу центарот со CSS метод може да предизвика помали проблеми. На пример, ако користите плови: на пример, постојат три блока:. Прво, второто и трето. Вториот и третиот блок лежат во првиот. Елементот со втора класа е оставен оправдан, а последниот блок е лево-подреден. По изедначување, и двајцата испаднале од потокот. Ако родителскиот елемент нема висина (на пример, 30em), тој веќе нема да се протега по висината на детските блокови. За да ја избегнете оваа грешка, користете "spacer" - специјален блок кој го гледа. Вториот и третиот. CSS-код:

• Секунда {плови: лево}
• Трето {плови: десно}
• .clearfix {висина: 0; Јасно: и двете;}

Често се користи псевдокласата: после, која исто така ви овозможува да ги вратите блоковите на страницата со создавање на псевдо-дистрибуција (во примерот во div, класата на контејнерот е внатре внатре и содржи .left и .right):

• .left {float: left}
• . Право {float: right}
• . Контејнер: по {содржина: ''; Покажи: табела; Јасно: и двете;}

Горенаведените опции се најчести, иако постојат неколку варијации. Секогаш можете да го најдете наједноставниот и најпогодниот начин да создадете псевдо-расфрлање со експериментирање.

Друг проблем кој често се среќава со дизајнерите на распоредот е усогласувањето на елементите на блок-блок. По секоја од нив, автоматски се додава простор. Сопственоста на маргината, која е одредена со негативно внесување, помага да се справи со ова. Постојат и други методи кои се користат многу поретко: на пример, ресетирање на големината на фонтот. Во овој случај, фонт-големина: 0 е поставен во својствата на родителскиот елемент. Ако има текст во внатрешноста на блоковите, потребната големина на фонтот се враќа во својствата на елементите на линиите. На пример, големината на фонтот: 1em. Методот не е секогаш погоден, така што верзијата со надворешни вдлабнатини многу почесто се користи.

Урамнотежените блокови ви овозможуваат да креирате убави и функционални страници: ова е изгледот на целокупниот изглед, локацијата на стоките во онлајн продавниците и фотографиите на деловната картичка.