Центриране на картинка по хоризонтала и вертикала

CSS и HTML » CSS

joneff   трудност:    видян: 16541

Вероятно всеки, който се е занимавал малко повече с 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]>
&lt;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;
}
&lt;/style>
&lt;![endif]-->

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

<div class="holder">

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

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

</div>