Выравнивание изображений по вертикали и горизонтали при помощи CSS

Выравнивание изображений по вертикали и горизонтали при помощи CSS

Довольно простой пример того как можно легко выровнять изображение по вертикали и горизонтали при помощи CSS.

Горизонтальное выравнивание

Выровнять изображение по горизонтали довольно легко, всё что сделать, это задать элементу ширину и применить margin-left: и margin-right: auto.
Браузер автоматически будет выравнивать отступы с левого и правого края, таким образом изображение будет всегда находится в середине родительского элемента.

<img src="example.html" alt="Center Images" />
img {
     width:250px;
     margin: 0 auto;
}

Выравнивание изображений по вертикали и горизонтали

Выравнивание изображений по вертикали и горизонтали требует немного больше усилий. Надо задать отступы не только от левого края но и с верху.

Данный пример можно часто встретить при отображении всплывающего окна или галереи изображений.

Мы выравниваем изображение с шириной 250px, для начала применяем абсолютное позиционирование и отступы слева и сверху 50%. Это выровняет наше изображение по центру но не совсем точно.

img {
   height: 250px;
   left: 50%;
   position: absolute;
   top: 50%;
   width: 250px;
}

Верхний левый угол изображение будет точно в центре, а нам надо добиться выравнивания всего изображений по вертикали и горизонтали. Для перемещения этой точки в центр изображения нам нужно переместить половину высоты и ширины. Для этого добавляем отрицательный отступ который равен половине высоты и ширины в нашем случае это 125px.

img {
   height: 250px;
   left: 50%;
   margin-top: -125px;
   margin-left: -125px;
   position: absolute;
   top: 50%;
   width: 250px;
}
comments powered by Disqus
Subscribe to RSS Feed Следить в Twitter