В този урок ще ви покажа как да центрирате един HTML елемент не само по хоризонтала, но и по вертикала. Ако тръгнете да се ровите из нета ще намерите много решения, които имат редица плюсове и минуси, но тук ще стане въпрос за най-лесния и бърз начин да го сторите.
На повечето от вас е ясно, че за да центрираме един елемент по хоризонтала (било то div, span, a, ul и пр.) е необходимо да му задаем ширина и margin: 0 auto. В някои по-специални ситуации, наложени от по-специални браузъри, трябва да добавим text-align: center и така нещата се получават, но в 99% от случаите ви е необходимо само margin: 0 auto. По-интересното е как да центрирате елемента по вертикалата, така че да стои винаги в средата на браузъра (или родителския елемент, ако пожелаете). Основният проблем идва от различните резолюции, на които се гледа сайтът. Точно за това ни трябва нещо универсално, което не е свързано с условности и изчисляване на безкрайни комбинации.
За примера днес ще направим нещо съвсем простичко, за да ви стане напълно ясно за какво говоря. Ще използваме един div, който ще центрираме спрямо екрана. Няма да пишем никакъв javascript. Изображения също не съм ползвал, тъй като, както казах се стремя да е максимално опростено.
| View DemoDownload |
Стъпка 1: HTML
Тук ни трябва само един div, който съм кръстил „centered“. Всичко останало е стандартно и е написано, за да го копирате и да имате валиден документ.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS Horizontally and Vertically Center Element by RIP</title> <link rel="stylesheet" href="css/style.css" type="text/css" /> </head> <body> <div id="centered"></div> </body> </html>
Стъпка 2: CSS
Вече имаме създаден div и нашата задача е да го центрираме, като за целта ще ползваме абсолютното позициониране. За хората, които не са наясно какво е това ще поясня с две думи. В CSS има няколко типа позициониране – relative, absolute, fixed и static. За основите им може да прочетете тук. В нашия случай ни интерсува поведението на relative и absolute. По принцип когато един елемент е абсолютно позициониран, то той излиза от нормалния „поток“ на HTML-a, ако мога да така да се изразя и обикновено застава над всички в горния ляв ъгъл на екрана. Сега вие може да го местите където си пожелаете, благодарение на свойствата top, left, bottom и right. Това е страхотно, нали? Да, но на различните резолюции, елементът не винаги е там, където трябва да бъде. Тук в помощ идва релативната позиция. Когато един div е позициониран релативно и в него има друг div, но вече абсолютно позициониран, то абсолютният се води по поставените граници от релативния. Така например ако имате Facebook икона в лявата колона, но искате я да позиционирате малко извън нея, трябва да зададете position: relative на лявата колона, за да може иконата да се води по нея, а не според екрана. В нашия случай обаче ни е нужно точно обратното – трябва да позиционираме спрямо екрана, ето защо не пишем допълнителни релативни div-ове. Напишете следния код.
body {
margin: 0;
padding: 0;
background: #FFF;
}
#centered {
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
background: #888;
border: 1px solid #444;
}
За body, настройките са стандартни, така че не им обръщаме внимание и се концентрираме на „centered“. Виждате, че съм задал ширина и височина на div-a, както и бекграунд и бордър, само за да видим къде е. След това добавям position: absolute, за да го позиционирам спрямо екрана и казвам да бъде на 50% (половината) отгоре и отляво. Така обаче позиционирам външните краища на div-a, а не самия център. Даже си поиграх малко да ви го илюстрирам по-добре. Приемете, че бялото пространство е браузъра.
Както виждате от фигурата това съвсем не е център. За целта трябва посредством отрицателни стойности на марджина да „избутаме“ или по-точно върнем div-a нагоре и наляво. За да намерим центъра му трябва да разделим страните му на две, т.е. 300px/2 = 150px. В случая имам квадрат, така че и двата марджина са с една и съща стойност, но важното е да запомните, че страните се делят на две… то си е и логично всъщност. Сега добавете отрицателните марджини към кода, за да получим желания резултат.
#centered {
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
background: #888;
border: 1px solid #444;
}
Имаме си напълно центриран div. Изтествайте, като минимизирате браузъра и го поразтеглите насам-натам.
Това е цялата философия. На този принцип може да си направите Login скрийн или пък да вадите важни съобщения… общо взето приложенията са много и ще го усетите с времето.
Урочето стана малко по-дълго от очакваното, защото се засилих да обяснявам по-подробно нещата и поне се надявам да сте разбрали всичко. Ако има въпроси питайте, ще се радвам да помогна.
тагове: CSS, CSS Positioning, Horizontal Centered Div, Vertical Centered Div, xHTML, вертикално центриране с CSS, хоризонтално центриране с CSS, центриране html елемент, центриране на div, центриране на див
