Вертикално центъра на елемента използване CSS

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

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

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

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

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

В сравнение с текста: Много центриране започне да се използва вертикално подравняване собственост. Това е логично, и първият ми избор ще бъде един и същ. До центъра на ред в таблицата може да се използва valign атрибут.

Въпреки valign атрибут работи само по отношение на клетката (например, съдържание ). CSS вертикално подравняване имот може да бъде поставена в клетката, както и някои вградени елементи.

• Текстът е центрирана върху линията височина (отстояние).
• С позоваване на масата, ако не навлизам в подробности, центриране се извършва по отношение на височината на реда.

За съжаление, вертикално подравняване собственост не може да се приложи към блокови елементи, например, като ал (р) вътре DIV на маркер.

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

Разстоянието между редовете, или Line-височина

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

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

В този случай, на височината на майка елемент не е задължително.

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

CSS метод с използване маси имоти

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

Абсолютно позициониране и отрицателно поле

Този метод е предназначен за блокови елементи и работи във всички браузъри. Необходимо е да се определи височината на елемента да бъде центриран.

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

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

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

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

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

Абсолютно позициониране елемент дете

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

Кодът на CSS аз Центриране дете елемент както вертикално, така и хоризонтално, но можете да използвате центриран само вертикално.

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

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

Горната и долната маржове са

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

Аз използвам относителните размери. Ако размера на блока е фиксирана, тя ще трябва да направите някои математически изчисления.

Например, ако майка елемент е с височина 400 пиксела, и дете 100 пиксела, той е необходимо поставяне на горна и долна отстъп на 150px.

150 + 150 + 100 = 400

плаващ Разделение

Този метод участва празната плаващ (флоат) блок, която контролира вертикално положение на дете елемент. Плаващ на DIV, трябва да се постави преди дете елемент, вижте HTML кода по-долу.

Първо, ние се измести на плаващия единица към левия (или вдясно) и го възлага на височина 50% от майка елемент. По този начин, плаващ блок ще запълни горната половина на майка елемент.

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

Сега на горния ръб на дете елемент се намира точно под долния ръб на плаващ елемент. Ние трябва да се повиши дете елемент при половината от височината на плаващия елемент. За тази избран достатъчно отрицателен за плаваща единица долната граница на 50%.

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