ИнтернетУеб дизайн

Центрирано: CSS оформление

Когато оформлението на страницата, често е необходимо да се направи в центъра CSS-начин: например, за да центрирате основния модул. Има няколко решения на този проблем, всяка от които рано или късно ще трябва да се използва всеки програмист.

Изравнете текст, за да центрирате

Често за декоративни цели искате да зададете текста центриран, CSS в този случай, за да се намали времето на налагане. Преди това е направено с помощта на HTML-атрибути, но сега стандартът изисква да се приведе в съответствие с текста стила лист. За разлика от блока, за който искате да промените външния подложка в CSS подравняване на текст в средата се прави с един ред:

  • текст-приравни: център;

Този имот е наследил и се предава от майка на всички деца. Това засяга не само на текста, но и на други елементи. За тази цел те трябва да бъдат малки букви (например, от време) или ред на блока (всички блокове, които определят дисплей имот: блок). Вторият вариант също ви позволява да промените ширината и височината на елемента, по-гъвкава конфигурация на вдлъбнатината.

страници често се подреждат атрибут на себе си етикет. Това веднага прави невалиден, тъй като W3C призна подравняване атрибут остаряла. Използването на една страница не се препоръчва.

центрирано блок

Ако искате да зададете подравняването на DIV в средата, CSS може да предложи доста удобен начин: използването на външна граница подплата. Пълнеж може да бъде определен като блокови елементи, както и линия блок. Svoysva стойност трябва да е 0 (вертикално запълване) и автоматично (автоматичен отстъп хоризонтално):

  • марж: 0 автомобил;

Сега тази възможност е призната за абсолютно валиден. Използване на външно уплътнение също ви позволява да настроите изравняването на центъра: CSS-марж имот ни позволява да се реши много проблеми, свързани с позиционирането елемент на страницата.

Привеждане на левия или десния край на блока

Понякога CSS-начин не изисква привеждане в съответствие на центъра, но е необходимо да се постави на следващите два блока, единият от лявата страна, а другият - отдясно. За това там е поплавък имота, което може да отнеме една от трите стойности: наляво, надясно или няма. Да речем, че има два блока, които трябва да се поставят една до друга. Тогава кодът е както следва:

  • .left {поплавъка: ляво;}
  • .right {поплавък: полето}

Ако има и трети блок, който трябва да се намира в рамките на първите два блока (например колонтитули), тогава е необходимо да се регистрирате ясна функция:

  • .left {поплавъка: ляво;}
  • .right {поплавък: полето}
  • долния {ясно: както}

Фактът, че блоковете с класовете на ляво и дясно спад от общия поток, това е, всички други елементи игнорирани самото съществуване на елементи изравнени. Имоти ясно: и двете позволява долния блок или друга видима отделя от клетките на потока и забранява обвивка (флоат) както от ляво и от дясно. Ето защо, в нашия пример, долната част на страницата се измества надолу.

вертикално подравняване

Има случаи, когато не е достатъчно, за да зададете подравняването на центъра на CSS-начини, вие също трябва да се промени във вертикално положение на детето блок. Всяка линия или ред блок елемент може да се притиска към горния или долния ръб, разположен в средата на елемента родител или да бъде произволно място. Най-често се изисква привеждане в съответствие на центъра на квартала, тя използва вертикално подравняване атрибут. Да предположим, че има два блока, единият извиква от друга страна. В този вътрешен модул - ред блок елемент (езика: вграден блок). Необходимо е да се приведе в съответствие вертикален блок детето:

  • подреждане на горната граница - .child {вертикално подравняване: най};
  • центриран - .child {вертикално подравняване: средна};
  • подреждане на долния ръб - .child {вертикално подравняване: долната};

В блокови елементи, аудио текст подравняване, или вертикално подравняване не се прилага.

Възможни проблеми с насочени единици

Понякога Div приведе центъра на CSS-начина, по който може да доведе до малко неприятности. Например, когато се използва плувка: например, има три блока: .first, .second и .third. Второто и третото блоковете се намират в първата. Елемент с клас второ ляво подравнен, а последният блок - в дясно. След съгласуване на двете падна от потока. Ако майка елемент не е определена височина (например, 30em), тя ще престане да се простират на височината на дъщерни звена. За да се избегне тази грешка, използвайте "дистанционера" - специален отдел, който вижда .second и .third. CSS-код:

  • .second {поплавък: лява}
  • .third {поплавък: полето}
  • .clearfix {височина: 0; ясно: и двете;}

псевдо-често се използва: след, което позволява да се върне на блоковете на място чрез създаване psevdorasporki (в примера в DIV с клас се намира вътре в контейнера и съдържа .first .left и .right):

  • .left {поплавък: лява}
  • .right {поплавък: полето}
  • .container: след {съдържание: ''; дисплей: маса; ясно: и двете;}

Посочените по-горе варианти - най-често, въпреки че има някои вариации. Винаги можете да намерите най-лесният и най-удобният начин да се създаде psevdorasporki от експерименти.

Друг проблем, често срещани оформление - привеждане в съответствие на линия блокови елементи. След всяка от тях пространство се добавя автоматично. Дръжка помага на марж имота, който се определя от отрицателния вдлъбнатината. Има и други начини, които се използват по-рядко, например, върнати на размера на шрифта. В този случай, свойствата на елемент родител регистри шрифта: 0. Ако разположени в блокове текст, свойствата на линия блокови елементи, са се завърнали в желания размер на шрифта. Например, шрифта: 1em. Методът не винаги е удобно, така че е много по-често се използва версия с външни граници.

Съобразяване на блокове ви позволява да създадете красиви и функционални страници: общия вид и оформлението, както и местоположението на стоки в магазините, както и снимки на мястото на малък.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 bg.unansea.com. Theme powered by WordPress.