Как выровнять картинку по центру при помощи Css?

Здравствуйте, дорогие читатели моего сайта. Сегодня я расскажу Вам, как выровнять картинки по центру на Вашем сайте.

Для начала немного теории, чтобы все Вы понимали откуда ноги растут. Дело в том, что <img> - это строчный элемент и правильнее было бы его выравнивать при помощи атрибута align, НО! Как мы знаем, чем больше в коде сайта у нас напихано всяческих атрибутов, тем труднее нам будет управлять внешним видом. Все время придется выискивать эти атрибуты и править их.

Собственно, для упрощения нашей дизайнерской работы и придуман был язык стилевой разметки под названием Css. И если можно все делать гораздо проще, то почему бы этим не воспользоваться? Ведь за нас уже давно придумали более простые способы оформить документы веб-ресурса и глупо было бы это игнорировать и не применять.

Ну, к черту лирику, давайте начинать разбираться.

Для начала создам тестовую папку. Положу туда index.html, style.css (файл со стилями) и файл-картинку. Далее создадим "скелет" нашего сайта в индексном файле:

viravnivaniehtml.jpg

В Css выравнивание элементов осуществляется, как правило, при помощи свойства margin. Но оно работает только для блочных элементов. Как я уже говорил, <img> - элемент строчный. Как же нам сделать так, чтобы наша картинка стала блочной?

Для этого есть волшебное свойство display, которое имеет множество значений, которые позволяют указать браузеру, каким образом ему воспринимать те или иные элементы страницы. По умолчанию у элемента <img> display:inline;, что означает, что этот он строчный. Но в Css мы можем изменять представление того или иного элемента. Написав display:block;, мы говорим браузеру, что данный элемент нужно обрабатывать, как блочный. Так и запишем в нашем файле со стилями.

Далее нужно указать наш margin. Значение у него должно быть "0 auto". Таким образом сверху и снизу отступов не будет, а значение "auto" говорит о том, что отступы по краям будет высчитывать браузер по своей формуле. Я в рассчетах браузера плохо разбираюсь, но догадываюсь, что он смотрит, что никаких конкретных отступов слева и справа нет, а стоит auto. Если auto - это некая переменная, то auto справа равно auto слева. Вот и получается, что браузер откладывает два одинаковых расстояния.

Таким образом, у нас получилось в файле css следующее:

viravnivaniecss1.jpg

Таким образом получаем картинку, выровненную по центру.


Стоит добавить, что если элемент не имеет фиксированной ширины, то тогда ее нужно задать принудительно! Иначе элемент не выровняется по центру.

Вот и все. Удачной Вам верстки!

P.S: Как Вы, наверное уже догадались, все картинки в данном материале выровнены именно таким способом.

Комментарии: