Центриране на картинка по хоризонтала и вертикала
Публикувана от smilev на January 12 2011 10:53:02

---

---

Разширена новина

---

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

Друг вариант е да си зададем картинката за фоново изображение и да я центрираме така, но и това не особено читаво.

Решението се оказа супер лесно -- само дето трябваше някой да ми го покаже първо. Видях го на CSSplay . В общи линии използваме стилове да укажем, че даден контейнер (div, p, или каквото друго искаме), е "клетка от таблица". Веднъж щом за браузъра контейнера е клетка от таблица, му задаваме вертикално подравняване и voila :)

<style type="text/css">
/* За браузъри различни от IE */

div.holder {
width:750px;
height:300px;
background:#f8f8f8;
border:1px solid #777;
text-align:center;
display:table-cell; /* тук задаваме поведение "клетка от таблица" */
vertical-align:middle; /* вертикално подравяване */
}
div.holder img {
margin:0 auto; /* централно подравняване */
border:1px solid #aaa;
}
</style>
<!--[if IE]>
<style type="text/css">

/* Вертикално подравняване за IE */
#edge {
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
#container {
text-align:center;
width:100%;
display:inline-block;
vertical-align:middle;
}
</style>
<![endif]-->

Сега да сглобим HTML кода.

<div class="holder">

<span id="edge"></span>

<span id="container"><img src="адрес_до_картинка"/></span>

</div>



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

Източник: Centering an image using CSS , CSSplay .