| ||
|
Центриране на картинка по хоризонтала и вертикалаВероятно всеки, който се е занимавал малко повече с 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 .
|
|