В боковой колонке уже представлены все наиболее частные варианты выравнивания фото (или другого элемента) по центу. Сейчас один маленький пример расположения картинки по середине блока div.

обезьяна <style> #izo { height: 25em; line-height: 25em; text-align: center; background: green; } #izo img { vertical-align: middle; } </style> <div id="izo"><img src="адрес-изо"></div>

Эти знания можно использовать, скажем, для создания крупных динамичных кнопок, таких как на сайте Мегафона. Я позаимствовала только изображения и идею, вёрстка там другая.

<style>.izo1 { display: inline-block; width: 340px; height: 134px; line-height: 134px; padding: 4px; text-align: center; overflow: hidden; }.izo1 img { box-shadow: 1px как сделать изображение блоком 1px 4px #40310a; vertical-align: middle; }.izo1 img:nth-of-type(2n) { position: relative; top: -134px; width: 306px; height: 102px; opacity: 0; transition-property: opacity, width, height; transition-duration:.6s,.2s,.2s; }.izo1:hover img:nth-of-type(2n) { width: 100%; height: 100%; opacity: 1; } </style> <div class="izo1"><img src="адрес-изо-1" изображение /><img src="адрес-изо-2" /></div>
Источник: http://shpargalkablog.ru/2013/06/css.html


Поделись с друзьями



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Css - Как сделать изображение, подстраивающееся под размеры Рисуем заяц поэтапно


Как сделать изображение блоком Как сделать изображение блоком Как сделать изображение блоком Как сделать изображение блоком Как сделать изображение блоком Как сделать изображение блоком Как сделать изображение блоком Как сделать изображение блоком Как сделать изображение блоком

ШОКИРУЮЩИЕ НОВОСТИ