Выравнивание картинки по центру средствами css!

Приветствую, вас уважаемые читатели. По названию понятно, что сегодня мы поговорим о том каким образом можно выровнять картинку по центру средствами css. Знаю… знаю.., тема  больше для начинающих верстальщиков, но тем не имения  это ни как не влияет на её актуальность. Хотя бы потому, что меня уже несколько раз спрашивали об этом, и не только  на страницах данного блога.

Хотите верьте хотите нет, но возможностей выровнять картинку по центру блока или страницы с текстом существует, как говорят, «вагон и маленькая тележка». Все эти способы в разных ситуациях применимы по разному. Я в этой статье расскажу только о нескольких  из них, о тех, которые чаще всего применяю в своей практике при верстке сайтов. Итак приступим.

Выравнивание картинки по центру отступами.

Наверняка вы знаете, что если мы зададим блоку с установленной шириной, внешние отступы margin:0 auto. То мы получим выравнивание данного блока по центру, такое же правило применимо и для картинки, если сделать её блочным элементов. Смотрите сами, предположим у нас есть картинка где-то внутри блока:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Выравнивание картинки по центру</title>
<link rel="stylesheet" href="style.css">
</head>
<body>



<div class="block-img">
<img src='images/img1.jpg' alt='img'>
</div>



</body>
</html>

Теперь если для картинки внутри блока с классом .block-img мы зададим css свойства:


.block-img img{
display:block;
margin:0 auto;
}

Мы собственно получим выравнивание данного изображение по центру нашего блока.

img-center1-min

Здорово не правда ли? А главное мы написали минимум css правил. Давайте рассмотрим еще один способ.

Выравнивание картинки по центру свойством text-align.

Так же мы можем отцентрировать наше изображение задав для его родительского элемента (в нашем случаи это блок с классом .block-img)  свойство: text-align:center;


.block-img{
text-align: center;
}

Как видите наш код стал еще короче, а результат тот же.  Здесь смысл в том, что по умолчанию наша картинка является строчным элементов (display:inline;), что по сути делает её обычным символом. А так как картинке это строка, то и поведение у нее как у обычной строки,  которую мы можем выровнять свойством text-align.

Понимаю,  на первый взгляд это все может показаться очень запутанным и не понятным. Но со временем, с практикой вы поймете, что у каждого элемента на странице будь-то div – блочный элемент или обычный текст или, как в нашем случаи, картинка изначально установлены свои css свойства, которые определяют их поведения на странице. И изменяя эти свойства вы можете манипулировать их поведением и тем самым определять их положение на странице. Пониманием этих тонкостей и принципов может вам создавать гибкую, а главное качественную верстку страниц.

Ладно буду закруглятся, а то чувствую уже понесло меня не в ту степь.

В общем надеюсь данный материал был вам полезен и вы поняли насколько легко и просто можно выравнивать картинки по центру блока с помощью простых правил css. Буду рад если вы и дальше будете радовать меня своим присутствием на данном блоге. Всего доброго и удачи!!!