съберат на страницата често е необходимо да се направи център подравняване CSS-начин: например, за да центрирате основното устройство.Има няколко решения на този проблем, всяка от които рано или късно ще трябва да използвате всеки програмист.
Align текст центриран
често за декоративни цели искате да зададете текстовото привеждане в съответствие на центъра, СГО в този случай, намалява времето на налагане.По-рано, това е направено с помощта на HTML-атрибути, сега стандарт изисква подравняване на текст с помощта на стилове.За разлика от блока, за който искате да промените външния маржове, с CSS подравняване на текст в средата се прави с един ред:
- текст-приравни: център;
Този имот е наследствено и се предава от майка на всички деца.Тя засяга не само на текста, но и на други елементи.За да направите това, те трябва да са с малки букви (например, продължителност) или линия-блок (всички блокове, които поставя на дисплея на имота: блок).Последната опция също ви позволява да промените ширината и височината на по-гъвкава конфигурация на вдлъбнатината.
Често страниците присъединяват атрибут към самия етикет.Това веднага прави кода невалиден като W3C призна подравняване атрибут остаряла.Употребата му не се препоръчва на страницата.
подравняване блок в центъра
Ако искате да укажете разположението на центъра на DIV, CSS може да предложи доста лесен начин: използване на външна граница на отстъп.Пълнеж може да бъде зададен като елементи блоков и линия-блок.Svoysva стойност трябва да бъде 0 (разчленена вертикално) и автоматично (автоматичен хоризонтални тире):
- марж: 0 автомобил;
Сега тази опция, се признава като абсолютно валидно.Използване на външно уплътнение също ви позволява да определите подравняването на центъра: CSS-марж имот ни позволява да се реши много проблеми, свързани с елемента позициониране на страницата.
Align блок на левия или десния ръб
Понякога център подравняване CSS-начин не е задължително, но е необходимо да се постави два блока в непосредствена близост до един от лявата страна, а другият - отдясно.За този имот има поплавък, който може да бъде в една от следните три стойности: ляво, дясно, или няма.Да речем, че има две единици, които трябва да бъдат взети заедно.След това кодът ще бъде:
- .left {плувка: ляво;}
- .right {плувка: полето}
Ако има и трети блок, който трябва да бъде поставен под първите два блока (например, футъра), тойтрябва да се регистрирате имота ясно:
- .left {плувка: ляво;}
- .right {плувка: полето}
- долния {ясно: и двете}
факт, че блоковете с класовете ляво и дясно падането от общопотока, което е, всички други елементи игнорирани самото съществуване на елементи подравнени.Имотът ясно: и двете позволява футъра или всяко друго устройство, за да виж падна от елементите на потока, а забранява обвивка (флоат), както на ляво и дясно.Ето защо, в нашия пример, футъра ще се измести надолу.
Vertical подравняване
Има случаи, когато недостатъчно набор център подравняване CSS-начини, вие все още трябва да се променят във вертикално положение на детето блок.Всяка линия или линия-блоков елемент може да се притиска към горния или долния ръб, който се намира в средата на родителския елемент, или да бъде на всяко място.По-често се изисква привеждане на наказателното поле в центъра, тази характеристика се използва вертикално подравняване.Да предположим, че има две единици, една в друга.Вътрешният блок - Онлайн-блоков елемент (дисплей: инлайн-блок).Необходимо е да се приведе в съответствие вертикално детето единица:
- подравняването на горната граница - .child {вертикално подравняване: топ};
- център подравняване - .child {вертикално подравняване: средна};
- привеждане в долния край - .child {вертикално подравняване: дъно};
на блокови елементи или текст подравняване, или вертикално подравняване не се прилага.
Възможни проблеми с подравнени единици
Понякога Разделения приведе центъра на CSS-пътя може да предизвика незначителни проблеми.Например, като се използва плувка: например, има три блока: .first, .second и .third.Вторият и третият блоковете са в първата.Елемент с клас на второ ляво подравнен, а последният блок - в дясно.След съгласуване на двамата падна от потока.Ако родителят не е определена височина (например, 30em), той вече няма да се простират на височината на спомагателни единици.За да се избегне тази грешка, използвайте "дистанционера" - специално звено, което вижда .second и .third.CSS-код:
- .second {плувка: ляв}
- .third {плувка: полето}
- .clearfix {височина: 0;ясно: и двете;}
често се използва псевдо: след, което ви позволява да се върнете към блоковете на място чрез създаване psevdorasporki (в този пример в Разделения с клас на контейнера е в рамките на .first и съдържа .left и .right):
- .ляво {плувка: ляв}
- .right {плувка: полето}
- .container: след {съдържание: '';езика: на маса;ясно: и двете;}
горе опции - най-често, въпреки че има някои различия.Винаги можете да намерите най-лесният и най-удобният начин да се създаде psevdorasporki от експерименти.
Друг проблем, често срещани оформление - подреждане на линия блокови елементи.След всяка от тях автоматично се добавя пространство.За да се справи с този имот помощ марж, който се определя от отрицателния вдлъбнатина.Има и други методи, които се използват по-рядко, например, пренастройване на размера на шрифта.В този случай, свойствата на майка предписано шрифта: 0.Ако се намира в рамките на блокове от текст, свойствата на линия блокови елементи, са се завърнали в желания размер.Например, шрифта: 1em.Методът не винаги е удобно, толкова по-често се използва опция с външни граници.
подравняване блок ви позволява да създадете красиви и функционални оформление на страницата и това е общото разположение и местоположението на стоки в магазини и снимките на малък сайт.
