Как выровнять HTML изображение по центру
Позиционирование и выравнивание изображений на странице HTML имеет решающее значение для макета страницы. Один из наиболее распространенных вопросов — как выровнять изображение по центру определенной секции. В этой статье мы обсудим множество возможных способов размещения изображений в центре заданной области.
В примерах данной статьи, чтобы сделать видимой границу оберточных элементов, мы сделаем их серого цвета. Итак, приступим.
Центрирование в параграфе
В первом примере мы покажем, как разместить изображение в центре элемента-контейнера, которым может быть элемент div, элемент параграфа и другие теги.
<p>
<img src="//msiter.ru/image.jpg" alt="изображение в центре параграфа" />
</p>
<style>
.aligncenter {
text-align: center;
}
</style>
Здесь всю работу делает CSS свойство text-align: center;. Если вы знаете код CSS, то вам ничего не нужно объяснять.
Центрирование при помощи отступов
Чтобы отцентрировать блоковый элемент, достаточно применить к нему стиль margin: auto;. Но известно, что тег img – это строковый элемент. Как же быть? Все очень просто. Чтобы все заработало, нужно сделать его блоковым применив CSS стиль display: block;.
<div> <img src="//msiter.ru/image.jpg" alt="отцентрированное изображение" /> </div> <style> .marginauto { margin: 10px auto 20px; display: block; } </style>
Центрирование при помощи тега <center>
Следует помнить, что тег <center> является устаревшим и не поддерживается в HTML5. Однако он все еще распознается веб-браузерами вроде Google Chrome.
Раньше это был предпочтительный метод, потому что он не требовал таблиц стилей, а только простой HTML.
Нам не хотелось бы использовать устаревшие элементы в статье, поэтому здесь нет демонстрации этого примера, только код.
<center>
<img src="//msiter.ru/image.jpg" alt="отцентрированное изображение" />
</center>
Центрирование при помощи атрибута align=middle
Еще один устаревший метод, который не требует использования CSS, похожий на предыдущий пример. В более старых версиях HTML мы могли центрировать изображение, устанавливая атрибут тега align=»middle».
<img align="middle" src="//msiter.ru/image.jpg" alt="отцентрированное изображение" />
Выравнивание изображения по центру по вертикали
Выше мы обсуждали, как выровнять изображение по горизонтали, но могут быть случаи, когда вам нужно центрировать его по вертикали.
Для этого нам нужно сделать два шага. Оберточный элемент должен отображаться как ячейка таблицы, а выравнивание по вертикали должно быть установлено на середину. В нашем примере мы устанавливаем фиксированную высоту для контейнера, чтобы убедиться, что он выше, чем наша картинка.
<div>
<img src="//msiter.ru/image.jpg" alt="отцентрированное изображение" />
</div>
<style>
.verticalcenter {
display: table-cell;
height: 400px;
vertical-align: middle;
}
</style>
Одновременное центрирование по горизонтали и по вертикали
Мы можем комбинировать горизонтальное и вертикальное выравнивание, как показано в примере ниже.
<div> <img src="//msiter.ru/image.jpg" alt="отцентрированное изображение" /> </div> <style> .verticalhorizontal { display: table-cell; height: 300px; text-align: center; width: 300px; vertical-align: middle; } </style>
Надеемся, что сегодня, прочитав эту статью, вы узнали что-то новое, и вы будете использовать полученные знания при разработке своих сайтов.
Как выровнять изображение по центру в html
Но также давно существуют различные варианты, которые задействованы на выравнивание картинок по центру, только уже при помощи CSS. Для начало нм понадобиться div обертка, но и безусловно сам материал в виде картинки. И здесь первым делом мы создаем div класс, под названием center-picture, где в последствие в него пропишем изображение.
Когда дело доходит до центрирования чего-либо как по горизонтали, так и по вертикали, то сложность работа может быть немного повышенной для достижения. В этой статье мы рассмотрим несколько методов, чтобы полностью центрировать элемент.
Далее остается выставить базовые стили для заданного класса center-picture, где задаем высоту и ширину,которая идет немного больше чем по умолчанию картинка, а также поставим обвод или рамку, где 1px пикселя в вполне хватит.
Где после установки мы буден наблюдать такой результат:
1. Вариант: Добавляем к изображению класс .center-picture.
Этот вариант заключается в том чтобы к изображению прописать свойство display, где идет значение
Теперь смотрим, как получится, после того, как поставите и все сохраните на сайте.
2. Вариант: с классом image-align
Здесь нужно скопировать предоставленный html код, что присутствует в этом методе. Где к DIV karkas-bloka добавляем еще один класс image-align.
А вот оставшийся класс .image-center нужно убрать, он там лишний.
Этот способ заключается в том, для того, чтобы все содержимое, что находится в DIV отцентрировать при помощи text-align : center. Здесь нужно добавить, если прописываем текст в DIV, то он аналогично с изображением центрироваться.
Но и сам результат после как все поставим.
3. Вариант: на свойстве display:flex
Этот способ будем основывать на свойстве display:flex – где нужно взять код html, что ранее был задействован на втором варианте, и там нужно изменить класс image-align на image-flex.
Если кто еще не знает, то свойство align-items изначально центрирует картинки по вертикали, а вот justify-content уже задействовано по горизонтали. Этот вариант в отличие от других двух имеет свою небольшой плюс, который заключается в том, что можно выравнивать изображение по двум осям.
Центрирование div на странице по горизонтали и вертикали
При построении макетов веб-страниц вы, вероятно, сталкивались с ситуацией, когда вам нужно центрировать div как по горизонтали, так и по вертикали с помощью чистого CSS.
Есть более чем несколько способов достичь этого, но этот считаю самым популярным.
Абсолютное центрирование в CSS
Если вы хотите центрировать что-то в CSS по горизонтали, вы можете сделать это просто с помощью text-align: center; при работе со встроенными элементами или margin: 0 auto; при работе с блочным элементом.
На этом не заканчиваем, так как есть возможно другие варианты, но эти самые ходовые, что можно встретить. Где теперь у вас не возникнут вопрос по теме, как правильно выставить по центру, так как сами видите, что не чего сложного в этом нет, в плане как нужно отцентрировать картинки по центру div.
Видео обзор с пояснением на варианты:
В материале подробно разберем три распространенных способа, как выровнять изображение или картинку по центру экрана, где задействуем HTML и CSS. Это касается как оформление статьи, где нужно выставить элемент по центру, так и самого дизайна, как пример, это поставить ключевое слово, чтоб оно ровно было от центрованное. Не секрет, что можно все сделать на bb кодах, но это касается только описание, но и картинки. |
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
6. 0+ | 1.0+ | 9.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Выровнять фотографию с подписью по центру горизонтали веб-страницы.
Решение
Иллюстрации к тексту часто выравнивают по центру веб-страницы, при этом текст располагается до и после изображения. Такое расположение элементов позволяет разбить большой текст на смысловые блоки и привлечь внимание к рисункам.
Вначале рассмотрим выравнивание изображения по центру. Для этого к селектору P следует добавить стилевое свойство text-align со значением center . При этом тег должен располагаться внутри абзаца (тег
). Чтобы не получилось так, что все абзацы на странице начали выравниваться по центру, введем свой класс fig , и все действия будем производить с ним. В примере 1 показано, как это сделать.
Пример 1. Использование text-align
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера продемонстрирован на рис. 1.
Рис. 1. Изображение, выровненное по центру веб-страницы
Также к фотографии можно добавить подрисуночную подпись. Текст должен располагаться сразу же после изображения и аналогично ему выравниваться по центру. Здесь всё просто, опять воспользуемся нашим классом, но уже применим его к тегу . Чтобы текст подписи отличался по своему виду от обычных абзацев, сделаем его курсивным и выделим другим цветом (пример 2).
Пример 2. Подрисуночная подпись
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Подпись под рисунком
Для блока с фотографией используется тег , а для подписи к нему тег . Старые версии IE не понимают эти теги, поэтому специально для них добавляется небольшой скрипт.
Приветствуй вас на сайте Impuls-Web!
Довольно часто, при верстке сайтов веб-разработчик сталкивается с необходимостью выравнивания изображений по центру. И если для опытного разработчика это не является проблемой, то у начинающего это может вызвать некоторые трудности.
Навигация по статье:
Я покажу вам несколько способов выравнивания картинки по центру html и css , которые вы сможете использовать в зависимости от ситуации.
Выравнивание картинки HTML
Кода вы верстаете страницу, и в каком-то единичном случае вы заранее знаете, что данное изображение должно быть по центру блока, то вы можете сделать выравнивания картинки по центру в html коде, обернув картинку в тег
Адаптивное выравнивание изображений на всю ширину браузера
Простой пример как адаптивно выстроить несколько изображений на всю ширину окна браузера.
1
Две картинки по горизонтали
<div> <a href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a> <a href="#"><img src="https://snipp.ru/img/city-2.jpg" alt=""></a> <a href="#"><img src="https://snipp.ru/img/city-3.jpg" alt=""></a> <a href="#"><img src="https://snipp.ru/img/city-4.jpg" alt=""></a> </div>
.photos {
text-align: center;
margin: 0 0 20px 0;
overflow: hidden;
}
.photos a {
width: 50%;
display: block;
float: left;
line-height: 0;
}
.photos img {
width: 100%;
height: auto;
}2
Три картинки по горизонтали
<div>
<a href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-2.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-3.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-4.jpg" alt=""></a>
<a href="#"><img src="https://snipp.
ru/img/city-5.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-6.jpg" alt=""></a>
</div>
ru/img/city-5.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-6.jpg" alt=""></a>
</div>.photos {
text-align: center;
margin: 0 0 20px 0;
overflow: hidden;
}
.photos a {
width: 33.3%;
display: block;
float: left;
line-height: 0;
}
.photos img {
width: 100%;
height: auto;
}3
Четыре картинки
<div>
<a href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-2.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-3.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-4.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-5.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-6.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-7.jpg" alt=""></a>
<a href="#"><img src="https://snipp.ru/img/city-8.jpg" alt=""></a>
</div>.photos {
text-align: center;
margin: 0 0 20px 0;
overflow: hidden;
}
.photos a {
width: 25%;
display: block;
float: left;
line-height: 0;
}
.photos img {
width: 100%;
height: auto;
}4
Для мобильных
Добавим стили, которые выведут фото по вертикали на мобильных с шириной экрана до 800px.
@media screen and (max-width: 800px) {
.photos a {
width: 100%;
float: none;
}
}Как выровнять по центру текст или картинку » Блог Андрея Бондаренко
Здравствуйте, уважаемые читатели.
Сегодня у нас тема: «Как выровнять по центру текст или картинку». Как сделать так, чтобы текст или картинка на странице сайта были по центру? Есть несколько способов.
Выравнивание по центру — способ №1
Этот способ считается не совсем правильным, но всё же расскажу и о нём. Нужно текст или картинку разместить между открывающимся и закрывающимся <center>.
<center> текст или картинка </center>
Выравнивание по центру — способ №2
Можно использовать <div> или <p>, то есть разместить текст или картинку, между открывающимся и закрывающимся тегом <div> или <p>.
<div> текст или картинка </div>
<p> текст или картинка </p>
Выравнивание по центру — способ №3
Использовать <div> как и в предыдущем примере, но все его атрибуты прописать в файле css, если Вы используете CSS.
<div> текст или картинка </div>
В файле css создаём класс:
.center {text-align: center;} Выравнивание по центру — способ №4
Всё как и в предыдущем примере, только класс нужно прописать прямо в коде страницы, между открывающимся и закрывающимся тегом <style>.
<style> .center {text-align: center;} </style>
<div> текст или картинка </div> При использовании любого из вышеописанных примеров, текст или изображение будет расположено по центру области, в которой Вы будете его использовать.
Сегодня мы рассмотрели тему: «Как выровнять по центру текст или картинку». Узнали несколько способов как добиться желаемого результата.
Надеюсь статья была вам полезна. До встречи в новых статьях.
✍
С уважением, Андрей Бондаренко.
html — Как выровнять изображения по вертикали по центру с помощью CSS и HTML?
Я пытаюсь центрировать эти логотипы по вертикали в своем div.
Как мне это сделать?
Вот мой jsfiddle: https://jsfiddle.net/huskydawgs/vm4d3a1q/1/
Вот мой HTML:
<div>
<div>
<img src="http://cdn.gottabemobile.com/wp-content/uploads/2012/05/sprint-logo1-620x308.jpg" alt="Sprint" /></div>
<div>
<img src="http://cdn-3.famouslogos.us/images/bank-of-america-logo.jpg" alt="Bank of America" /></div>
<div>
<img src="http://www.underconsideration.com/brandnew/archives/Dell_Logo_Tagline.jpg" alt="Dell" /></div>
<div>
<img src="http://www.unitedrentals.com/static/images/ur-logo.png" alt="United Rentals" /></div>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Ford_Motor_Company_Logo.svg/2000px-Ford_Motor_Company_Logo.svg.png" alt="United Rentals" /></div>
Вот мой CSS:
.container-5col {
display: flex;
justify-content: center;
}
.container-5col > div {
margin: 10px;
padding: 10px;
text-align: center;
}
.box-5col-1 {
width: 20%;
}
.box-5col-2 {
width: 20%;
}
.box-5col-3 {
width: 20%;
}
.box-5col-4 {
width: 20%;
}
.box-5col-5 {
width: 20%;
}
1
user3075987 3 Сен 2015 в 22:07
2 ответа
Лучший ответ
Замените justify-content: center на align-items: center
Как это:
.container-5col {
display: flex;
align-items: center;
}
1
Sergio Marron 3 Сен 2015 в 19:13
Вы также можете добиться этого с помощью таблицы отображения, которая поддерживается в IE 8+
Css
. container-5col {
display: table;
}
.container-5col > div {
width: 20%;
margin: 10px;
padding: 10px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
container-5col {
display: table;
}
.container-5col > div {
width: 20%;
margin: 10px;
padding: 10px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
Вот пример JsFiddle JsFiddle.
1
Andrew 3 Сен 2015 в 19:18
Как точно выровнять объекты на странице слайдов презентации?
Материалы данного урока представлены с использованием программы MS PowerPoint 2007.
Большая часть пользователей программы Microsoft PowerPoint для выравнивания объектов на слайде использует перетаскивание объекта правой кнопкой мыши. Либо выделяют нужный объект левой кнопкой мыши и стрелками клавиатуры выравнивают его положение относительно других объектов. Таким образом сложно добиться высокой точности позиционирования. Лучше использовать специальные встроенные инструменты PowerPoint.
Предположим, у нас на слайде размещены 3 прямоугольника. И нам необходимо выровнять их расположение относительно прямоугольника, который смещен максимально вправо. На представленном ниже рисунке таким прямоугольником является средний.
Для решения данной проблемы выделяем все три прямоугольника (например, с использованием клавиши «Ctrl»). Нажимаем «Ctrl» и, не отпуская, поочередно скликаем по всем прямоугольникам левой кнопкой мыши.
Далее, заходим в меню «Формат» — «Выровнять по правому краю»:
В итоге получаем точно выравнивание прямоугольников по самому правому:
Аналогичным образом можно выполнить выравнивание по любой стороне, как по вертикали, так и по горизонтали.
Если в настройках выравнивания выбрать «Выровнять относительно слайда» (по умолчанию у нас было «Выровнять выделенные объекты»),
то все объекты при выборе «По правому краю» сместятся к правой границе правого слайда.
В дополнение ко всему, с помощью инструмента выравнивание можно включить сетку и задать параметры ее отображения («Отображать сетку» и «параметры сетки»). Сетка позволяет визуально наблюдать точно положение объектов на слайде.
И наконец, инструмент позволяет равномерно распределять объекты, как по вертикали, так и по горизонтали (см. одноименные пункты меню).
Таким образом, инструмент «Выровнять» поваляет оперативно и с максимальной точностью определять местоположение объектов на слайде друг относительно друга и относительно самого слайда. Причем это касается любых объектов, создаваемых на слайде: текст, изображение, мультимедиа, графики.
Как использовать CSS для центрирования изображений и других объектов HTML
Что нужно знать
- Для центрирования текста используйте следующий код («[/]» обозначает разрыв строки): .center {[/] text-align: center; [/]} .
- Центрируйте блоки содержимого со следующим кодом («[/]» обозначает разрыв строки): .center {[/] margin: auto; [/] ширина: 80em; [/]} .
- Для центрирования изображения («[/]» обозначает разрыв строки): img.center {[/] display: block; [/] маржа слева: авто; [/] margin-right: авто; [/]} .
CSS — лучший способ центрировать элементы, но это может быть проблемой для начинающих веб-дизайнеров, потому что существует множество способов сделать это. В этой статье объясняется, как использовать CSS для центрирования текста, блоков текста и изображений.
Центрирование текста с помощью CSS
Вам нужно знать только одно свойство стиля для центрирования текста на странице:
.center {
выравнивание текста: по центру;
} В этой строке CSS каждый абзац написан с расширением.класс center будет центрирован по горизонтали внутри своего родительского элемента. Например, абзац внутри подразделения (дочерний элемент этого подразделения) будет центрирован по горизонтали внутри
Вот пример применения этого класса в HTML-документе:
Этот текст расположен по центру.
При центрировании текста с помощью свойства text-align помните, что он будет центрирован внутри содержащего его элемента, а не обязательно по центру самой страницы.
Читаемость всегда имеет ключевое значение, когда речь идет о тексте веб-сайта. Большие блоки текста с выравниванием по центру могут быть трудночитаемыми, поэтому используйте этот стиль с осторожностью. Заголовки и небольшие блоки текста, такие как текст тизера для статьи, обычно легко читаются, когда они расположены по центру; тем не менее, большие блоки текста, такие как целая статья, было бы сложно воспринимать, если бы они были полностью выровнены по центру.
Центрирование блоков содержимого с помощью CSS
Блоки контента создаются с использованием HTML
.центр {
маржа: авто;
ширина: 80em;
} Это сокращение CSS для свойства margin установит для верхнего и нижнего поля значение 0, а для левого и правого будет использоваться значение «auto». По сути, это занимает любое доступное пространство и равномерно делит его между двумя сторонами окна просмотра, эффективно центрируя элемент на странице.
Здесь это применяется в HTML:
Весь блок центрирован,
, но текст внутри него выровнен по левому краю.
Пока ваш блок имеет определенную ширину, он будет центрироваться внутри содержащего элемента. Текст, содержащийся в этом блоке, не будет центрирован внутри него, а будет выровнен по левому краю. Это связано с тем, что текст по умолчанию выровнен по левому краю в веб-браузерах. Если вы хотите, чтобы текст также был центрирован, вы можете использовать свойство text-align, описанное ранее, в сочетании с этим методом, чтобы центрировать разделение.
Центрирование изображений с помощью CSS
Хотя большинство браузеров будут отображать изображения по центру с использованием того же свойства text-align, консорциум W3C это не рекомендует.Следовательно, всегда есть шанс, что будущие версии браузеров могут игнорировать этот метод.
Вместо использования выравнивания текста для центрирования изображения вы должны явно указать браузеру, что изображение является элементом уровня блока. Таким образом, вы можете центрировать его, как и любой другой блок. Вот CSS, чтобы это произошло:
img.center {
display: block;
маржа слева: авто;
поле справа: авто;
}
class = «ql-syntax»>А вот HTML-код изображения, которое нужно центрировать:
class = «ql-syntax»>
Вы также можете центрировать объекты с помощью встроенного CSS (см. Ниже), но этот подход не рекомендуется, поскольку он добавляет визуальные стили в вашу разметку HTML.Помните, что стиль и структура должны быть отдельными; добавление стилей CSS в HTML нарушит это разделение, и поэтому вам следует по возможности избегать его.
class = «ql-syntax ql-align-center»>
Центрирование элементов по вертикали с помощью CSS
Центрирование объектов по вертикали всегда было сложной задачей в веб-дизайне, но выпуск модуля CSS гибкого макета блока в CSS3 предоставляет способ сделать это.
Вертикальное выравнивание работает аналогично горизонтальному выравниванию, описанному выше.Свойство CSS имеет вертикальное выравнивание, например:
.vcenter {
vertical-align: middle;
} Все современные браузеры поддерживают этот стиль CSS. Если у вас есть проблемы со старыми браузерами, W3C рекомендует центрировать текст в контейнере по вертикали. Для этого поместите элементы внутри содержащего элемента, такого как div, и установите для него минимальную высоту. Объявите содержащий элемент как ячейку таблицы и установите вертикальное выравнивание на «середину».
Например, вот CSS:
.vcenter {
min-height: 12em;
дисплей: таблица-ячейка;
vertical-align: middle;
} А вот HTML:
Этот текст расположен по центру поля по вертикали.
Не используйте элемент HTML для центрирования изображений и текста; он устарел, и современные веб-браузеры больше не поддерживают его. Это по большей части является ответом на четкое разделение структуры и стиля в HTML5: HTML создает структуру, а CSS диктует стиль. Поскольку центрирование — это визуальная характеристика элемента (то, как он выглядит, а не то, что он есть), этот стиль обрабатывается с помощью CSS, а не HTML.Вместо этого используйте CSS, чтобы ваши страницы отображались правильно и соответствовали современным стандартам.
Вертикальное центрирование и предыдущие версии Internet Explorer
Вы можете принудительно центрировать Internet Explorer (IE), а затем использовать условные комментарии, чтобы только IE видел стили, но они были немного подробными и непривлекательными. Однако решение Microsoft от 2015 года отказаться от поддержки старых версий IE сделает это не проблемой, поскольку IE выйдет из употребления.
Спасибо, что сообщили нам!
Расскажите, почему!
Другой Недостаточно подробностей Сложно понятьЦентрирование (по горизонтали и вертикали) изображения в блоке
Центрирование (по горизонтали и вертикали) изображения в блокеПроблема
Мы хотим центрировать изображение внутри контейнера, большего, чем изображение, и с заданными размерами.Изображение не является фоновым, это настоящий элемент .
Любое изображение имеет четко определенные размеры, поэтому самый простой и надежный способ решить проблему:
- сделать изображение
отображаемым: блок - назначить изображению необходимые левое и верхнее поля
Например, если у вас есть изображения двух разных размеров, например, в фотогалерее с «альбомными» и «портретными» изображениями, которые нужно центрировать в контейнерах фиксированного размера, а затем присвоить каждому один из двух классов (с разные поля) решит проблему.
Но есть случаи, когда не хочется использовать предыдущий метод. Например, когда задействовано много изображений, все с разными размерами, и нецелесообразно назначать разные поля для каждого из них, или когда размеры контейнера и изображения не выражаются в одних и тех же единицах ( пикселей, , em , % ,…), следовательно, вычислить разницу невозможно. Было бы полезно найти другое решение, независимо от размера изображения.
Решение
Горизонтальное центрирование несложно.Если изображение остается с встроенным дисплеем по умолчанию , то text-align: center - очевидное решение, хорошо работающее во всех браузерах.
Для вертикального центрирования лучшим решением, работающим в современных браузерах, является назначение display: table-cell; vertical-align: середина к контейнеру. Это работает в браузерах на базе Gecko, Opera 6+, Safari, IE8. Он оставляет IE7 и ниже (как для Windows, так и для Mac).
Для IE7 - идея состоит в том, чтобы создать своего рода линейный блок, имеющий высоту, равную высоте контейнера, и снова использовать vertical-align: middle .Свойство line-height нельзя использовать для этого, поскольку оно некорректно работает в IE7- / Win при наличии изображений. Также использование большого размера шрифта (без указания высоты строки) проблематично, потому что высота сгенерированного блока немного больше, чем размер шрифта. И IE5 / Mac (в отличие от IE / Win) может изменять размер (по выбору пользователя), высоту строки и размер шрифта, выраженные в пикселях, поэтому у него будут проблемы с этим подходом, если высота контейнера не выражена в Эм.Примечание: этот же аргумент исключает общее использование такого метода вертикального центрирования, основанного на высоте строки, в браузерах на основе Gecko и Safari.
К счастью, IE7- имеет (частичную) поддержку отображения : встроенный блок .
Если внутри контейнера добавляется пустой встроенный блочный элемент (например, span ) и ему назначается высота : 100%; vertical-align: middle , то это позволяет точно получить то, что мы хотим: прямоугольник с желаемой высотой. Другими словами, элемент inline-block учитывает назначенную высоту (равную высоте контейнера) и поддерживает линию открытой, так что vertical-align: middle (как на дополнительном элементе, так и на изображении) дает желаемое вертикальное центрирование .
Некоторые детали:
Дополнительный пустой элемент inline-block может иметь нулевую ширину в IE7- / Win, но он должен иметь ширину не менее: 1pxв IE / Mac, иначе это не имеет никакого эффекта смещает горизонтальное центрирование на 1 пиксель. Этому можно противодействовать с помощью поля -1 пиксель, но проблема едва заметна.)В IE5 / Mac вертикальное центрирование смещено на несколько пикселей. Использование небольшого размера шрифта или высоты строки в контейнере кажется полезным, не понятно почему (IE5 / Mac здесь немного непоследователен, особенно при игре с настройками размера шрифта.)
Комбинированное решение, использующее display: table-cell и дополнительный span с display: inline-block , работает в браузерах на базе Gecko, Opera 6+. Safari, IE5 + / Win, IE5 / Mac.
Вариант этого метода может использоваться для вертикального центрирования блочного элемента (даже с неизвестной высотой) внутри другого (с известной высотой), что является более интересной проблемой.
Код
Собираем все вместе и называем "wraptocenter" классом контейнера, это соответствующий CSS.Код для IE / Mac заключен в подходящий фильтр. Код для IE7- / Win помещен в условные комментарии.
И это соответствующий HTML-код
Некоторые примеры
Чтобы продемонстрировать решение, оно применяется к двум изображениям разного размера и к двум разным размерам контейнеров. Первые контейнеры имеют выраженные размеры в пикселях, вторые - в ems. Контейнеры имеют фон сетки, чтобы лучше проверять центрирование.
Некоторые другие примеры, где изображения содержат (красную) сетку, которая должен совпадать со светло-серой сеткой фона контейнера.
Другие, немного более сложные, примеры: изображения в плавающих контейнерах, галерея изображений с подписями.
Статья Стива Клея по этой проблеме.
Большое спасибо Инго Чао за его помощь и комментарии.
CSS tests home
Как вертикально выровнять изображение внутри DIV с помощью CSS
Тема: HTML / CSSPrev | Next
Ответ: Используйте CSS
vertical-align Свойство Вы можете выровнять изображение по вертикали по центру внутри
, используя свойство CSS vertical-align в сочетании с display: table-cell; на содержащем элементе div. Кроме того, поскольку свойство поля CSS не применимо к display: table-cell; , поэтому мы обернули содержащий DIV другой DIV ( .outer-wrapper ) и применили к нему маржу. Это решение будет работать даже для изображений с большей высотой, чем содержащие DIV.
Вертикальное центрирование IMG в DIV с помощью CSS
<стиль>
.external-wrapper {
дисплей: встроенный блок;
маржа: 20 пикселей;
}
.Рамка{
ширина: 250 пикселей;
высота: 200 пикселей;
граница: сплошной черный 1px;
вертикальное выравнивание: по центру;
выравнивание текста: центр;
дисплей: таблица-ячейка;
}
img {
максимальная ширина: 100%;
максимальная высота: 100%;
дисплей: блок;
маржа: 0 авто;
}
Вы также можете использовать метод позиционирования CSS для вертикального выравнивания изображения внутри DIV.
Давайте посмотрим на пример, чтобы понять, как это в основном работает:
Вертикальное выравнивание изображения внутри DIV с помощью CSS
<стиль>
.Рамка{
ширина: 250 пикселей;
высота: 200 пикселей;
маржа: 20 пикселей;
граница: сплошной черный 1px;
положение: относительное;
}
img {
максимальная высота: 100%;
максимальная ширина: 100%;
позиция: абсолютная;
верх: 0;
внизу: 0;
слева: 0;
справа: 0;
маржа: авто;
}
