Всеки, който се занимава с оформление, рано или късно се сблъсква с необходимостта да подравнява елементите вертикално... и знае какви трудности могат да възникнат при подравняването на елемент към центъра. CSS има свойството „vertical-align“ с множество стойности, което логично би трябвало вертикално подравняване. На практика обаче не работи според очакванията.

Има няколко техники за решаване на този проблем. Нека разгледаме по-отблизо всеки от тях по-долу.

1. Подравняване с маса

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

HTML

css

Външен (ширина: 200px; височина: 200px; подравняване на текст: център; вертикално подравняване: средно; цвят на фона: #ffc;)

Основен недостатък това решение, от гледна точка на семантиката - използването на таблицата не е по предназначение. Вторият недостатък е, че за да създадете таблица, трябва да добавите още един елемент наоколо външно тяло.

Първият отрицателен може да бъде частично отменен чрез замяна на етикетите на таблицата с divs и настройка на режима на показване на таблицата в CSS.

HTML

css

Външна обвивка ( дисплей : таблица ; ) .външен ( дисплей : клетка-таблица ; )

2. Подравняване с подложка

При условие, че знаем височините на вътрешния и външния блок, подравняването може да се зададе с помощта на вертикалните отстъпи на вътрешния блок, като се използва формулата: (H външен - H вътрешен) / 2.

css

Външен (височина: 200px;) .вътрешен (височина: 100px; margin: 50px 0;)

Минусът на решението е задължителното познаване на височината на двата блока.

3. Подравняване с височина на линията

Ако вътрешният блок заема не повече от един ред текст, тогава можете да използвате свойството line-height и да го зададете равно на височината на външния блок. Тъй като съдържанието на вътрешния блок не трябва да отива на втория ред, добра идея е да добавите и правилата white-space: nowrap и overflow: hidden.

css

Outer (height: 200px; line-height: 200px;) .inner (white-space: nowrap; overflow: hidden;)

Този метод може да се използва и за подравняване многоредов текст. За да направите това, вътрешният блок трябва да замени стойността на височината на линията, както и да добави правилата display: inline-block и vertical-align: middle .

css

Outer (височина: 200px; line-height: 200px;) .inner (line-height: normal; display: inline-block; vertical-align: middle;)

Недостатъкът на този метод е, че трябва да се знае височината на външния блок.

4. Подравняване с „разтягане“

Този метод може да се използва, когато височината на вътрешния блок ни е известна, но външният не е известен.

За кандидатстване този методИмаме нужда от:

• Задайте външния блок на позиция: относителна, а вътрешния блок на абсолютна позиция: абсолютна;
• Добавете някои правила top: 0 и bottom: 0 към вътрешния блок, в резултат на което той ще се разтегне до цялата височина на външния блок;
• Задайте вертикалната подложка на вътрешния блок на автоматично.

css

Външна (позиция: относителна;) .вътрешна (височина: 100px; позиция: абсолютна; горна: 0; долна: 0; поле: автоматично 0;)

5. Подравняване с отрицателен марж-горна част

Подобно на предишния, този метод се използва, когато височината на външния блок е неизвестна, но е известна височината на вътрешния.

Трябва да настроите външния блок на относително позициониране, а вътрешния блок на абсолютно позициониране. След това преместете вътрешната кутия надолу на половината от височината на горната част на външната кутия: 50% и я преместете нагоре наполовина на собствената й височина margin-top: -H _{атрешна} / 2 .

css

Outer (позиция: относителна;) .inner (височина: 100px; позиция: абсолютна; top: 50%; margin-top: -50px;)

Минус този метод- трябва да се знае височината на вътрешното тяло.

6. Подравняване с трансформация

Методът може да се използва, когато височината на вътрешното тяло е неизвестна. Трябва да преместите вътрешната кутия надолу на половината от височината на горната част на външната кутия: 50%, след това използвайте свойството transform и я повдигнете обратно с функцията translateY(-50%).

css

Outer (позиция: относителна;) .inner (позиция: абсолютна; горна: 50%; трансформация: translateY (-50%);)

7. Подравняване с псевдоелемент

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

Същността на метода е да добавите вграден блок с височина 100% във външния блок и да го настроите на вертикално подравняване. Така височината на добавения блок ще бъде равна на височината на външния блок. Вътрешният блок ще се подравни вертикално по отношение на добавения, а оттам и външния блок.

За да не се нарушава семантиката, е желателно да се добави вграден блок, използвайки преди или след псевдоелементи.

css

Outer :before ( display : inline-block ; height : 100% ; vertical-align : middle ; content : "" ;) .inner ( display : inline-block ; vertical-align : middle ; )

Недостатъкът на този метод е, че не може да се използва при абсолютно позициониране на вътрешното тяло.

8. Подравняване с Flexbox

Най-модерният начин за вертикално подравняване е използването на гъвкаво оформление на кутия (или съкратено Flexbox). Тя ви позволява гъвкаво да контролирате позиционирането на елементите на страницата, като ги поставяте почти навсякъде. Централното подравняване за Flexbox е много проста задача.

css,

HTML

Мисля, че много от вас, които са работили по оформление, са се сблъсквали с необходимостта да подравняват елементите вертикално и знаят какви трудности възникват при подравняването на елемент към центъра.

Да, за вертикално подравняване в CSS има специално свойство vertical-align с много стойности. На практика обаче не работи според очакванията. Нека се опитаме да разберем това.

Нека сравним следните подходи. Подравняване с:

• маси,
• отстъп,
• височина на линията ,
• разтягане,
• отрицателен марж,
• трансформирам,
• псевдо елемент
• flexbox.

Като илюстрация разгледайте следния пример.

Има два елемента div, като единият е вложен в другия. Нека им дадем подходящите класове – външен и вътрешен.

Целта е да подравните вътрешния елемент към центъра на външния елемент.

Като начало, помислете за случая, когато размерите на външния и вътрешния блок известен. Нека добавим display: inline-block към вътрешния елемент и text-align: center и vertical-align: middle към външния елемент.

Не забравяйте, че подравняването се прилага само за елементи, които имат режим на вградено или вградено блоково показване.

Нека зададем размерите на блоковете, както и цветовете на фона, за да видим границите им.

Външен (ширина: 200px; височина: 200px; подравняване на текст: център; вертикално подравняване: по средата; цвят на фона: #ffc;) .inner (дисплей: вграден блок; ширина: 100px; височина: 100px; цвят на фона : #fcc; )
След като приложим стиловете, ще видим, че вътрешният блок е подравнен хоризонтално, но не и вертикално:
http://jsfiddle.net/c1bgfffq/

защо стана такаФакт е, че свойството vertical-align влияе върху подравняването самият елемент, а не неговото съдържание(освен когато се прилага към клетки на таблица). Следователно приложението даден имотДа се външен елементне даде нищо. Освен това прилагането на това свойство към вътрешния елемент също няма да направи нищо, тъй като вградените блокове са вертикално подравнени със съседните блокове, а в нашия случай имаме един вграден блок.

Има няколко техники за решаване на този проблем. Нека разгледаме по-отблизо всеки от тях по-долу.

Подравняване с маса

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

http://jsfiddle.net/c1bgfffq/1/

Очевидният недостатък на това решение е, че от гледна точка на семантиката е погрешно да се използват таблици за подравняване. Вторият недостатък е, че за да създадете таблица, трябва да добавите още един елемент около външния блок.

Първият минус може да бъде частично премахнат чрез замяна на етикетите table и td с div и настройка на режима на показване на таблицата в CSS.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Въпреки това външният блок ще остане маса с всички произтичащи от това последствия.

Подравняване с подложка

Ако височините на вътрешния и външния блок са известни, тогава подравняването може да се зададе с помощта на вертикалната подложка на вътрешния блок, като се използва формулата: (H външен - H вътрешен) / 2.

Външен (височина: 200px;) .вътрешен (височина: 100px; поле: 50px 0;)
http://jsfiddle.net/c1bgfffq/6/

Недостатъкът на решението е, че е приложимо само в ограничен брой случаи, когато са известни височините на двата блока.

Подравняване с височина на реда

Ако знаете, че вътрешният блок трябва да заема не повече от един ред текст, тогава можете да използвате свойството line-height и да го зададете равно на височината на външния блок. Тъй като съдържанието на вътрешния блок не трябва да се пренася във втория ред, препоръчително е да добавите и правила за бяло пространство: nowrap и overflow: скрити.

Outer (височина: 200px; line-height: 200px;) .inner (white-space: nowrap; overflow: hidden;)
http://jsfiddle.net/c1bgfffq/12/

Тази техника може да се използва и за подравняване на многоредов текст, ако замените стойността на височината на реда за вътрешния блок и добавите правилата display: inline-block и vertical-align: middle .

Outer (височина: 200px; line-height: 200px;) .inner (line-height: normal; display: inline-block; vertical-align: middle;)
http://jsfiddle.net/c1bgfffq/15/

Недостатъкът на този метод е, че трябва да се знае височината на външния блок.

Разтягане на подравняване

Този метод може да се използва, когато височината на външния блок е неизвестна, но е известна височината на вътрешния.

За целта са ви необходими:

1. задайте относително позициониране към външния блок и абсолютно позициониране към вътрешния блок;
2. добавете правилата top: 0 и bottom: 0 към вътрешния блок, в резултат на което той ще се простира до цялата височина на външния блок;
3. задайте стойността на auto за вертикалната подложка на вътрешния блок.

.outer (позиция: относителна; ) .inner (височина: 100px; позиция: абсолютна; горна: 0; долна: 0; поле: автоматично 0; )
http://jsfiddle.net/c1bgfffq/4/

Същността на тази техника е, че задаването на височина за разтегнат и абсолютно позициониран блок кара браузъра да изчислява вертикални подложки в равни пропорции, ако тяхната стойност е зададена на auto.

Подравняване с отрицателен марж отгоре

Този метод е широко известен и се използва много често. Подобно на предишния, той се прилага, когато височината на външния блок е неизвестна, но е известна височината на вътрешния.

Трябва да настроите външния блок на относително позициониране, а вътрешния блок на абсолютно позициониране. След това трябва да преместите вътрешната кутия надолу наполовина от височината на външната кутия отгоре: 50% и да я преместите нагоре наполовина от нейната собствена височина margin-top: -H inner / 2.

Outer (позиция: относителна; ) .inner (височина: 100px; позиция: абсолютна; top: 50%; margin-top: -50px; )
http://jsfiddle.net/c1bgfffq/13/

Недостатъкът на този метод е, че трябва да се знае височината на вътрешното тяло.

Подравняване с трансформация

Този метод е подобен на предишния, но може да се приложи, когато височината на вътрешния блок е неизвестна. В този случай, вместо да зададете отрицателна подложка в пиксели, можете да използвате свойството transform и да повдигнете вътрешната кутия нагоре с функцията translateY и стойност от -50%.

Външен ( позиция: относителна; ) .вътрешен ( позиция: абсолютна; горна: 50%; трансформация: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Защо в предишния метод беше невъзможно да се зададе стойността като процент? Тъй като процентните стойности на свойството марж се изчисляват спрямо родителски елемент, стойност от 50% ще бъде половината от височината на външната кутия и ще трябва да повдигнем вътрешната кутия с половината от нейната собствена височина. Точно за това служи свойството transform.

Недостатъкът на този метод е, че не може да се приложи, ако вътрешното тяло има абсолютно позициониране.

Подравняване с Flexbox

Повечето модерен начинвертикалното подравняване е да се използва гъвкаво оформление на кутия (популярно известно като Flexbox). Този модулви позволява гъвкаво да контролирате позиционирането на елементите на страницата, като ги поставяте почти навсякъде. Централното подравняване за Flexbox е много проста задача.

Външният блок трябва да бъде настроен на display: flex, а вътрешният блок трябва да бъде настроен на margin: auto. И това е всичко! Красиво, нали?

Външен ( дисплей: гъвкав; ширина: 200px; височина: 200px; ) .inner (ширина: 100px; поле: автоматично; )
http://jsfiddle.net/c1bgfffq/14/

Недостатъкът на този метод е, че Flexbox се поддържа само от модерни браузъри.

Кой път да избера?

Необходимо е да се изхожда от изложението на проблема:

• За вертикално подравняване на текст е по-добре да използвате вертикална подложка или свойството line-height.
• Идеален за абсолютно позиционирани елементи с известна височина (напр. икони). годен начинс отрицателно свойство margin-top.
• За по-сложни случаи, когато височината на блока е неизвестна, трябва да се използва псевдоелемент или свойството transform.
• Е, ако имате достатъчно късмет да не се налага да поддържате по-стари версии на IE, тогава, разбира се, Flexbox е по-добър.

Често при оформление има нужда от вертикално подравняване на текста в блок. Ако това трябва да се направи в клетка на таблица, тогава се задава стойността на CSS свойството vertical-align.

Но възниква разумен въпрос, възможно ли е да се направи без таблица, без да се претоварва маркирането на страницата с ненужни тагове? Отговорът е „можете“, но поради лоша поддръжка на CSS в MSIE, решението на проблема за него ще се различава от решението за други обичайни браузъри.

Като пример разгледайте следния фрагмент:

и се опитайте да подравните текста вертикално към центъра на кутията и към дъното на кутията.

Решението на проблема

„Правилните“ браузъри (включително MSIE

Мнозинство модерни браузъриподдържа CSS2.1, а именно стойността на клетката на таблицата за свойството display. Това ни дава възможност да принудим блока с текст да бъде показан като клетка от таблица и, използвайки това, да подравним текста вертикално:

div (
дисплей: клетка-таблица;
вертикално подравняване: средно;
}

div (
дисплей: клетка-таблица;
вертикално подравняване: отдолу;
}

Internet Explorer (до версия 7 включително)

За да разрешите проблема с подравняването на текст към дъното на блок в MSIE, можете да използвате абсолютно позициониране (тук имаме нужда от вграден елемент, вложен в блок):

div (
позиция: роднина;
}
div span(
дисплей:блок;
позиция: абсолютна;
дъно: 0%;
ляво: 0%
ширина: 100%
}

Този набор от правила работи и в "правилните" браузъри.

Посочете свойства

div span (
дисплей:блок;
ширина: 100%
}

не са задължителни, но може да са необходими, ако планирате да използвате хоризонтално подравняване на текста в допълнение към вертикалното подравняване на текста, например text-align: center ;.

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

Материал за изследване:

• Вертикално центриране в CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
• Вертикално центриране с помощта на CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
• Вертикално подравняване (www.cssplay.co.uk/ie/valign.html)
• вертикално подравняване:средно (cssing.org.ua/2005/07/14/vertical-align-middle/)
• Друг начин за вертикално подравняване в CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

Проблемът с вертикално центриране на елементи в CSS има редица готови решения. Избор на метод за подравняване за всеки отделен случайзависи от вида, размера, разположението на елементите и други свойства, определени от тях.

По-долу са техниките за вертикално подравняване, популярни сред дизайнерите на оформление. Показва как работят и за кои случаи всеки от тях е най-подходящ.

Ето два елемента div:

Всеки метод ще се използва за подравняване на вътрешното тяло спрямо центъра на външното тяло.

line-height за един ред

Когато родителят обхваща един ред текст и височината на детето е известна, може да се приложи свойството line-height. Стойността на свойството трябва да е равна на височината на външната кутия. Това работи само за един ред, така че е добре детето да добави overflow: hidden и white-space: nowrap, за да предотврати обвиването на реда.

Няма да можете да използвате line-height=100% като процент, защото 100% в този случай е височината на шрифта.

Контейнер(
височина: 300px;
височина на реда: 300px
}

Атрешна(
бяло пространство: nowrap;
преливане: скрито;
}

Методът е приложим само когато е известна височината на външния блок.

Таблица с вертикално подравняване

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

базова линия - по подразбиране;
. bottom - съдържание в долната част на клетката;
. средно - съдържание в средата на клетката;
. top - съдържание в горната част на клетката.

В първия пример самотна клетка от таблица става външен блок.

Контейнер(
дисплей: клетка-таблица;
вертикално подравняване: средно;
}

Методът е добър, защото работи за елементи без дадена височина, но в някои случаи използването му е възпрепятствано от факта, че външният блок, като всяка клетка на таблица, настройва ширината си спрямо съдържанието си и може да бъде разтегнат само чрез изрично задаване на ширината за ширина. За клетка без таблица процентите не работят адекватно.

Този недостатък се коригира чрез обвиване на клетката в родителската със свойството display:table. Този елемент може да бъде оразмерен като процент. Крайният код ще изглежда така:

Външна обвивка (
дисплей: маса;
}

Контейнер(
дисплей: клетка-таблица;
вертикално подравняване: средно;
}

Позиция: абсолютен + отрицателен марж

Методът се използва, когато е известна височината на вътрешния елемент. За външен блок може да е неизвестен. На родителя е дадено относително позициониране, а детето вътре в него е абсолютно.

Стойност на горното свойство от 50% кара вложеният елемент да бъде позициониран най-отгоре в средата на външната кутия. Остава да го повдигнете с отрицателен margin-top с половината от собствената си височина, така че да стои точно в центъра на вертикала.

Контейнер(
позиция: роднина;
}

Атрешна(
височина: 140px;
позиция: абсолютна;
отгоре: 50%;
margin-top: -70px;
}

Недостатъкът на този метод е необходимостта да се знае височината на детето.

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

Подравняването на вградени и вградени блокови елементи, включително изображения и икони, в заобикалящия ги текст се извършва със свойството vertical-align. За разлика от таблицата, в този случай работи целият набор от нейните стойности, посочени в спецификацията.

Като се има предвид височината на родителя, това свойство може да се използва за центриране на многоредов текст.

За външния блок е предписано центрирането на една линия.

Контейнер(
височина: 140px;
височина на реда: 140px;
}

Стойността на височината на линията за вътрешния блок се заменя с нормална или каквато и да е стойност, която желаете. Освен това му е дадено подравняване вертикално подравняване: средно и преобразуване към тип inline-block - дисплей: inline-block.

Атрешна(
дисплей: inline-block
височина на линията: нормална
вертикално подравняване: средно;
}

Недостатъкът на този метод е, че трябва да знаете височината на родителя.

Подравняване с трансформация

Функцията translateY на свойството transform ви позволява да центрирате вътрешна кутия с неизвестна височина. За да направите това, родителят трябва да бъде позициониран относително, а детето трябва да е позиционирано абсолютно.

Свойството top със стойност 50% спуска вътрешното поле така, че горният му ръб да е в средата на родителя. Стойността translateY: -50% повдига елемента с половината от собствената му височина и по този начин подравнява вертикалните центрове на кутиите.

Контейнер(
позиция: роднина;
}

Атрешна(
позиция: абсолютна;
отгоре: 50%;
трансформиране: translateY(-50%);
}

Недостатъкът на приемането е ограничената поддръжка на функции за трансформиране от браузъра IE.

Подравняване чрез псевдоелемент

Методът работи, когато височината е неизвестна нито за първия, нито за втория блок. Добавя се вграден псевдоелемент inline-block вътре в родителя, използвайки преди или след . Височината на добавения елемент трябва да е равна на височината на родителя - височина: 100%. Вертикалното подравняване на съдържанието се задава с vertical-align: middle.

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

Контейнер: преди (
съдържание: "";
височина: 100%;
вертикално подравняване: средно;
дисплей: inline-block
}

Атрешна(
дисплей: inline-block
вертикално подравняване: средно;
}

Универсален начин. Не работи, ако вътрешният блок е настроен на абсолютно позициониране.

Flexbox

Най-новият и най-лесният начин за вертикално подравняване на елементи. Flexbox ви позволява да подредите елементите на уеб страница по какъвто начин желаете. За да центрирате блок, просто задайте родителя на display: flex и детето на margin: auto.

Контейнер(
дисплей: гъвкав;
ширина: 320px
височина: 140px;
}

Атрешна(
ширина: 120px
марж: авто;
}

Flexbox работи само в модерни браузъри.

Избор на метод

Коя техника за вертикално подравняване да се използва зависи от задачата и ограниченията, които могат да присъстват във всеки отделен случай.

Височината на елементите е неизвестна

В тази ситуация можете да използвате един от четирите универсални метода:

1. Маса. Родителят е клетка от таблица, създадена в HTML или чрез display-table/display-cell. На този родителски елемент се дава vertical-align: middle.

2. Псевдоелемент. За външния блок се създава псевдоелемент на вграден блок с ширина=100% и вертикално подравняване: по средата. На детето се дава display: inline-block и vertical-align: middle. Методът не работи само когато на вътрешния блок е дадено абсолютно позициониране.

3. Трансформирайте. Родителят получава позиция: роднина. На детето се дава позиция: абсолютна, горна: 50% и трансформация: translateY(-50%);

4 Flexbox. Външният блок е настроен на display: flex, вътрешният блок е настроен на margin: auto.

Известна е само височината на детето

Външният блок е разположен относително; на вътрешния елемент е дадено абсолютно позициониране, горна част: 50% и горна граница, равна на половината от височината му.

Един ред на блок с известна височина

Външното поле е настроено на свойството line-height със стойност, равна на неговата височина.

Височината на външния блок е известна, но вътрешният елемент не е известен.

На родителя се дава височина на реда, равна на неговата височина. Височината на реда на детето се предефинира до нормална или каквато и да е стойност, която искате, и му се дава display: inline-block и vertical-align: middle.

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

Ако някога сте го опитвали, значи е трудно, особено ако искате да избегнете използването на таблици. За щастие виковете ни за помощ бяха чути и едно от новите оръжия, добавени към арсенала на CSS за справяне с този проблем, е типът оформление, известен като оформлението на flex box. Както ще разберете след няколко минути, той ви предоставя някои наистина страхотни функции за опростяване на сложни оформления. Част от тази страхотна функционалност също ви позволява да центрирате съдържанието си вертикално и хоризонтално, което ще разгледаме в този урок. Можете да направите това с подплата до известна степен, но това може да пренесе оформлението ви на по-малки екрани. Добавянето на персонализиран CSS клас към вашата таблица със стилове означава, че можете вертикално да центрирате всяко съдържание за секунди.

Хоризонтално подравняванеопределя как левият и десният ръб на абзаца съвпадат между левия и десния ръб текстово поле. Вертикалното подравняване определя разположението на знака в текстовото поле вертикално. Отсъствие добри начиниВертикалното центриране на елементи на CSS е тъмен недостатък в репутацията му почти през цялото му съществуване.

Първи метод с височина на линията

Първият метод е прост и донякъде банален, където има недостатъци, че ще има ограничение в приложението. Когато кодирате html страници за сайт, разстоянието между редовете на текстовото съдържание вероятно е един от атрибутите, които обикновено се оставят по подразбиране. Като цяло трябва да зададем височината на самата линия, която идва с подобна височина за блока, където се използва височина на линията Имот.

css

Constutesim_first(
рамка: 2px плътен #bf1515;
височина: 175px;
}
.constutesim_first > p(
line-height:175px;
марж:0;
подравняване на текст: център;
подплата: 0;
размер на шрифта: 17px;
цвят: #3152a0;
семейство шрифтове: Tahoma;
тегло на шрифта: удебелен;
}

Освен това можете веднага да видите как всичко ще изглежда в действителност.

По подобен начин е възможно да се реализира как да се зададе изображението, което ще бъде центрирано и безусловно вертикално. Тук остава само да регистрирате едно свойство vertical-align: middle; който отговаря за показването на изображението.

css

Втора вариация(
рамка: 2px плътно червено;
line-height:158px;
}

Втори вариант div(
подравняване на текст: център;
}
.second-variation img (
вертикално подравняване: средно;
рамка: 0px плътна #3a3838;
}

Изпълняваме снимки на изображения в центъра и вертикално.

Подравняване със свойството позиция

Това е може би най-известният метод, но най-разпространеният по отношение на приложението, с което да се използва използвайки CSS. Но тук трябва да се добави, че той също не е идеален и този метод също има свои собствени малки нюанси, които са свързани с центъра на елемента, че ако е зададен като процент, той ще бъде центриран от лявата страна на горната страна, вътре в самия блог.

css

Competaird-опция (
рамка: 2px плътен #d40e0e;
височина: 162px;
позиция: роднина;
}
.competaird-option div (
позиция: абсолютна;
отгоре: 50%;
ляво: 50%
височина: 28%;
ширина: 49%
марж: -2% 0 0 -25%;
рамка: 2px плътна #4a4848;
}

Разстоянието между редовете или височината на реда е вертикалната височина между редовете на текста при изобразяване HTML страница. Почти винаги тази стойност на разстоянието се задава на подходящата стойност от браузъра или машината за изобразяване. Тази стойност обикновено зависи от шрифта на показваната страница и други фактори.

Подравняване със свойството на таблицата

В този метод използваме доказаните и стар метод, където ще преработим елементите в таблица, в която са разположени клетките. Що се отнася до етикета, наречен таблица, той няма да се използва тук, тук ще зададем съвсем различно css свойство, е display: table;, display: table-cell;. Ако говорим за най-старите версии на IE, тогава данните просто няма да се показват тук. Надявам се, че сте актуализирали браузъра си, тъй като вече не е подходящ и почти всичко не се показва правилно.

Cherevert-вариация (
рамка: 2px плътен #c30b0b;
височина: 173px;
дисплей: маса;
ширина: 100%
размер на шрифта: 17px;
тегло на шрифта: удебелен;
цвят: #3945a0;
}

Cherevert-вариация div(
дисплей: клетка-таблица;
вертикално подравняване: средно;
подравняване на текст: център;
}

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

Подравняване със свойството flex

Тук стигаме до по-оригинална версия, която има свои собствени свойства, които рядко могат да бъдат намерени в оформлението на интернет ресурс. Но все пак се използват, че в някои случаи са полезни. Това установява основната ос, така че дефиницията на насочени гъвкави елементи се поставя във флопи контейнера.

css

Вариант-хоризонтално (
рамка: 2px плътен #d20c0c;
височина: 147px;
дисплей: гъвкав;
подравняване на елементи: център;
justify-content: център;
размер на шрифта: 18px;
тегло на шрифта: удебелен;
цвят: #49518c;
}

Можете да посочите стойност за line-height точно както бихте посочили всеки друг размер в css, като число, размер в пиксел или като процент.

Подравняване със свойството трансформация

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

css

вертикална медилпасудса (
рамка: 2px плътен #e00a0a;
височина: 158px;
размер на шрифта: 19px;
тегло на шрифта: удебелен;
цвят: #353c71;
}
.vertical-medilpasudsa > div(
позиция: роднина;
отгоре: 50%;
трансформиране: translateY(-50%);
подравняване на текст: център;
}

Когато предоставяте стойности като число, те ще се основават на текущия размер на шрифта като основа. Текущият размер на шрифта се умножава по числото, което сте посочили, за да се изчисли височината на реда или разстоянието между редовете.

Ако искате да центрирате символите хоризонтално в даден елемент, трябва да използвате text-align: center. Една опция, ако искате да го центрирате вертикално и имате фиксиран долен колонтитул на горния колонтитул и един ред текст, задайте височината на реда да бъде същата като височината на долния колонтитул.

Ако трябва да центрирате текст вътре в елемент като div, заглавка или параграф, можете да използвате свойство за подравняване на текст CSS.

Text-align има няколко валидни свойства:

център:Текстурата е центрирана;
наляво:Ще се подравни към лявата страна на контейнера;
дясно:Подравнен към дясната страна на контейнера
оправдавам:Принуден да се подравни както с левия, така и с десния ръб на контейнера, с изключение на крайните линии;
оправдаване на всички:Принуждава най-външния низ да оправдае знаците;
начало:Същото като вляво, само ако посоката е отляво надясно. Но ще бъде правилно, ако първоначално зададете посоката на посоката на текста, която ще се случи отдясно наляво;
край:Обратното на началото;
съответстващ родител:Подобно на наследяването, с изключение на началото и края, то е относително към родителския елемент;

Използвайте тези свойства, за да подравните текст в родителски или обвиващ div. Ако искате да центрирате текст хоризонтално в елемент, трябва да използвате text-align: center.

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