Как сделать центр изображения (по вертикали и горизонтали) внутри большего div
У меня есть div 200 х 200 пикселей. Я хочу разместить изображение размером 50 x 50 пикселей прямо в середине div.
Как это сделать?
Я могу центрировать его по горизонтали, используя text-align: center для div. Но проблема в вертикальном выравнивании.
Ответы 36
Обычно я устанавливаю line-height на 200 пикселей. Обычно получается.
Я бы установил ваш больший div с position:relative;, тогда для вашего изображения сделайте следующее:
img.classname{
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-25px;
}
Это работает только потому, что вы знаете размеры как изображения, так и содержащего его div. Это также позволит вам иметь другие элементы в содержащем div ... где решения, такие как использование line-height, не будут.
РЕДАКТИРОВАТЬ: Обратите внимание ... ваши поля составляют отрицательную половину размера изображения.
Я использовал это, но удалил биты margin и добавил -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);. Дает более общее решение, для которого требуется размер элемента.
в div
style = "text-align:center; line-height:200px"
Но это, похоже, не работает, если div просто содержит изображение (FF3). code: <div style = "border: 1px solid #ccc; margin: 20px; height: 200px; width: 200px;"> <img src = "sun.gif" /> </div> Я что-нибудь упустил?
Это на самом деле не соответствует заданному вопросу и должно работать только для текста (и только центрирует цель / текст по вертикали). Принятый ответ является наиболее подходящим решением afaik.
Другой способ - это, конечно, создать table с valign. Это будет работать независимо от того, знаете ли вы высоту div или нет.
<div>
<table width = "100%" height = "100%" align = "center" valign = "center">
<tr><td>
<img src = "foo.jpg" alt = "foo" />
</td></tr>
</table>
</div>
но вы всегда должны придерживаться только css, когда это возможно.
Я знал, что за это проголосуют против. Я подумал о том, чтобы перечислить это просто для полноты картины, но, да ладно.
Разве вы не знаете, что использование таблиц вызывает слепоту?
CSS, когда это возможно, но это определенно полезный запасной вариант. Не забывайте, почему мы вообще перестали использовать таблицы. Используйте то, что является наиболее подходящим решением гибкий. Иногда это так.
Возражение, анимус: все остальные решения здесь предполагают, что вы знаете размер изображения в том виде, в каком они отображаются в браузере, что не так, если вы разрабатываете адаптивный макет, где ваше изображение имеет вид «высота: 100%», а его контейнер - «ширина» : 25% ", оставляя вас с запасом по x или y неизвестного размера.
Людям, слепо тупым по отношению к полезности таблиц, не следует заниматься созданием веб-сайтов. Этот ответ совершенно верен, потому что в CSS и поддержке широкого браузера все еще есть ошибки.
Если вы знаете размер родительского div и изображения, вы можете просто использовать абсолютное позиционирование.
Это не ответ на вопрос, это не более чем намек.
Картофель, картофель. Я думаю, что это ответ, хотя, может быть, и не самый лучший.
Как, по вашему мнению, это отвечает на вопрос? В лучшем случае ОП знает, что им придется поискать другой ответ, чтобы понять, что это означает (например, этот ответ был опубликован почти на час раньше вашего. В худшем случае это бесполезный шум.
Я думаю, вы недооцениваете лучший случай. В лучшем случае OP знает, что такое абсолютное позиционирование, и может реализовать его напрямую. Я согласен с тем, что существование этого ответа кажется довольно бессмысленным, учитывая, что он, похоже, не добавляет многого к предыдущим. Я не помню, о чем думал. Прошло много времени!
Ответы, которые пытаются ответить на вопрос, остаются ответами. Если вам не нравится ответ или вы думаете, что он неправильный, проголосуйте против. Может быть, вам удастся пристыдить ответчика, удалив его собственный ответ. Когда отмечать ответ как «это не ответ»?
Vertical-align - один из наиболее часто используемых стилей CSS. Это не работает так, как вы могли бы ожидать от элементов, которые не являются td или css "display: table-cell".
Это очень хороший пост по этому поводу. http://phrogz.net/CSS/vertical-align/index.html
Наиболее распространенные методы достижения того, что вы ищете:
- обивка сверху / снизу
- абсолютное положение
- высота линии
Лично я бы поместил его как фоновое изображение в div, CSS для этого:
#demo {
background: url(bg_apple_little.gif) no-repeat center center;
height: 200px;
width: 200px;
}
(Предполагается, что div с id = "demo", поскольку вы уже указываете height и width, добавление background не должно быть проблемой)
Позвольте браузеру взять на себя нагрузку.
Обычно это лучший ответ, если только размер изображения не может варьироваться от меньшего до большего, чем размер контейнера. В «меньшем» случае это будет нормально, но в «большом» случае ваше изображение будет обрезано.
Не так удобен для SEO / читателей, если вы хотите добавить атрибут ALT.
А как насчет того, чтобы использовать спрайт? Я пытаюсь центрировать фоновое изображение, но использую спрайт CSS. Любые идеи?
@ Натан, это непростая задача. Однако вы можете это сделать, если знаете точные размеры div и оставляете достаточно прозрачного пространства вокруг изображения на спрайте, чтобы другие изображения на спрайте не отображались.
Вот лучшее решение: css-tricks.com/snippets/css/…. Также предложено @Tim K.
Мои изображения всегда имеют разный размер. Как это применить, если изображение имеет разный размер?
@Anirugu осталось использовать: 50% вместо этого
У меня есть галерея изображений, для которых я не знаю точную высоту или ширину изображений заранее, я просто знаю, что они меньше, чем div, в котором они будут содержаться.
Выполнив комбинацию настроек высота линии в контейнере и используя вертикальное выравнивание: средний в элементе изображения, я наконец заставил его работать в FF 3.5, Safari 4.0 и IE7.0, используя следующую разметку HTML и следующий CSS.
Разметка HTML
<div id = "gallery">
<div class = "painting">
<a href = "Painting/Details/2">
<img src = "/Content/Images/Paintings/Thumbnail/painting_00002.jpg" />
</a>
</div>
<div class = "painting">
...
</div>
...
</div>
CSS
div.painting
{
float:left;
height:138px; /* fixed dimensions */
width: 138px;
border: solid 1px white;
background-color:#F5F5F5;
line-height:138px;
text-align:center;
}
div.painting a img
{
border:none;
vertical-align:middle;
}
Вы можете центрировать изображение по горизонтали и вертикали с помощью приведенного ниже кода (работает в IE / FF). Он поместит верхний край изображения ровно на 50% высоты браузера, а верхний край (потянув половину высоты изображения вверх) точно отцентрирует его.
<style type = "text/css">
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {vertical-align: middle; width: 100%;}
#inner {position: relative; top: -50%} /* for explorer only */
</style>
<body style = "background-color:#eeeeee">
<div id = "middle">
<div id = "inner" align = "center" style = "margin-top:...px"> /* the number will be half the height of your image, so for example if the height is 500px then you will put 250px for the margin-top */
<img src = "..." height = "..." width = "..." />
</div>
</div>
</body>
спасибо всем за подсказки.
Я использовал этот метод
div.image-thumbnail
{
width: 85px;
height: 85px;
line-height: 85px;
display: inline-block;
text-align: center;
}
div.image-thumbnail img
{
vertical-align: middle;
}
Это работает для меня:
<body>
<table id = "table-foo">
<tr><td>
<img src = "foo.png" />
</td></tr>
</table>
</body>
<style type = "text/css">
html, body {
height: 100%;
}
#table-foo {
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
#table-foo img {
display: block;
margin: 0 auto;
}
</style>
Я обнаружил, что приведенные выше ответы Валамаса и Лепу являются наиболее простыми ответами, касающимися изображений неизвестного или известного размера, которые вы бы предпочли не встраивать в свой CSS. У меня есть несколько небольших настроек: удалите ненужные стили, установите размер до 200 пикселей, чтобы он соответствовал вопросу, и добавьте max-height / max-width для обработки изображений, которые могут быть слишком большими.
div.image-thumbnail
{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}
div.image-thumbnail img
{
vertical-align: middle;
max-height: 200px;
max-width: 200px;
}
Это старое решение, но доля рынка браузеров достаточно увеличилась, чтобы вы могли обойтись без взлома IE, если вас не беспокоит деградация IE7. Это работает, когда вы знаете размеры внешнего контейнера, но можете знать или не знать размеры внутреннего изображения.
.parent {
display: table;
height: 200px; /* can be percentages, too, like 100% */
width: 200px; /* can be percentages, too, like 100% */
}
.child {
display: table-cell;
vertical-align: middle;
margin: 0 auto;
}
<div class = "parent">
<div class = "child">
<img src = "foo.png" alt = "bar" />
</div>
</div>
В CSS это делается так:
img
{
display:table-cell;
vertical-align:middle;
margin:auto;
}
Только сделайте его горизонтальным центром. Если вы укажете auto для верхнего и нижнего поля, браузеры по умолчанию принимают его равным нулю.
Не работает - jsfiddle.net/dandv/umBRF, хотя причина не в марже сверху / снизу, как предлагает knoxxs. Чтобы изображение отображалось как ячейка таблицы, в элементе родитель должен быть display: table-cell; vertical-align: middle; - jsfiddle.net/dandv/umBRF/1
Close, но свойства display и vertical-align нужно применить к контейнеру, а не к центру объекта. (См. Ответ Кшитиджа Чопры)
Это немного поздно, но вот решение, которое я использую для вертикального выравнивания элементов в родительском div.
Это полезно, когда вы знаете размер контейнера div, но не размер содержащегося в нем изображения. (часто бывает при работе с лайтбоксами или каруселями изображений).
Вот стиль, который вам стоит попробовать:
container div
{
display:table-cell;
vertical-align:middle;
height:200px;
width:200px;
}
img
{
/*Apply any styling here*/
}
+1 за то, что показал мне, как заставить CSS div вести себя как ячейка таблицы, теперь я могу избежать дальнейших бесчисленных часов разочарования, заставляя CSS делать то, что просто сделать с традиционной ячейкой таблицы HTML
добавить в выравнивание текста: центр; в контейнер div, и он центрируется в обоих направлениях, если вы применяете максимальную высоту / ширину к изображению неизвестного размера.
лучший ответ на мой взгляд. и не забывайте выравнивание текста: центр;
Примечание. По умолчанию элементы img встроены, и их нужно установить на «block», чтобы они находились в середине по вертикали. img { display: block; }
Этот ответ кажется лучше, чем другие, получившие больше голосов. Он работает независимо от сторонних фреймворков или комбинации стилей в нескольких элементах.
Работа в старых браузерах (IE> = 8)
Абсолютное положение в сочетании с автоматическим отступом позволяет центрировать элемент по горизонтали и вертикали. Положение элемента может быть основано на положении родительского элемента с использованием относительного позиционирования. Посмотреть результат
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
это действительно центрирует img в середине страницы, но не в середине div размером 200 x 200 пикселей.
просто сделайте относительный div #someDiv { position: relative }
хорошо работает во всех браузерах, принятый не работает для IE <9
Это отлично сработало для меня и помогает, когда у вас нет точного размера контейнера DIV или изображения. Спасибо!
@AbhishekDeb и последние 20+ результатов Google, которые я просмотрел, чтобы узнать, как этого добиться.
Вы также можете центрировать исключительно по горизонтали, опуская верх и низ, и центрировать исключительно по вертикали, опуская правое и левое.
не работает в Opera 11.62 Build 1347 win7-64 (по состоянию на октябрь 2014 г.)
Недостаток этого подхода: вы больше не можете заставить изображение уменьшаться от родительской ширины, см. stackoverflow.com/a/13546011/1627888
@YoLudke, да, можно. просто включите max-width:100%; height:auto;. вы также можете выровнять его по любой из сторон, опуская эту сторону. довольно круто.
даже сейчас, когда гибкость набирает популярность, кажется, что это единственное решение, обеспечивающее правильное вертикальное и горизонтальное выравнивание изображения во всех основных браузерах. гениальное решение!
вот рабочий пример, демонстрирующая этот метод, который может быть полезен: jsfiddle.net/spencerw/pzvq72gb
Не работает с изображениями с динамической шириной (эскизами). "Позиция: абсолютная;" каким-то образом блокирует расширение
Что такое миниатюра с динамической шириной? Можете опубликовать пример?
Это решение может добавить «max-height: 100%; max-width: 100%;» чтобы изображение идеально соответствовало div.
Это сработало для меня. Добавьте это в изображение css:
img
{
display: block;
margin: auto;
}
вот еще один способ сосредоточить все в чем-либо.
HTML: (как всегда просто)
<div class = "Container">
<div class = "Content"> /*this can be an img, span, or everything else*/
I'm the Content
</div>
</div>
CSS:
.Container
{
text-align: center;
}
.Container:before
{
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.Content
{
display: inline-block;
vertical-align: middle;
}
Преимущества
Высота контейнера и содержимого неизвестна.
Центрирование без определенного отрицательного поля, без установки высоты строки (поэтому оно хорошо работает с несколькими строками текста) и без скрипта, также отлично работает с переходами CSS.
+1. Отличное решение и очень хороший ТАК ответ. Мне интересно, что заставляет браузер вести (ожидаемое) поведение только при добавлении псевдокласса before с content: "" (потому что многие из нас могли безуспешно пробовать display: inline-block и vertical-align: middle).
на самом деле это очень просто. вы создаете пустой элемент внутри контейнера, который охватывает высоту 100%, а затем вы выравниваете свой элемент по центру этого пустого. заставляя ваш элемент находиться точно в центре контейнера.
У меня была эта проблема в HTML5 с использованием CSS3, и мое изображение было центрировано как таковое в DIV ... о, да, я не могу забыть, как мне пришлось добавить высоту, чтобы показать изображение ... какое-то время я задавался вопросом, где это было, пока я не сделал это. Я не думаю, что позиция и отображение необходимы.
background-image: url('../Images/01.png');
background-repeat:no-repeat;
background-position:center;
position:relative;
display:block;
height:60px;
Это работает правильно:
display: block;
margin-left: auto;
margin-right: auto
иначе попробуйте это, если приведенное выше дает вам только горизонтальное центрирование:
.outerContainer {
position: relative;
}
.innerContainer {
width: 50px; //your image/element width here
height: 50px; //your image/element height here
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Или используйте display: block; margin: auto; для простейшего.
Другой способ (еще не упомянутый здесь) - Flexbox.
Просто установите для контейнера div следующие правила:
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
div {
width: 200px;
height: 200px;
border: 1px solid green;
display: flex;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
}<div>
<img src = "http://lorempixel.com/50/50/food" alt = "" />
</div>Хорошее место для начала работы с Flexbox, чтобы увидеть некоторые из его функций и получить синтаксис для максимальной поддержки браузера, - это флексибоксы.
Кроме того, поддержка браузеров в настоящее время неплохая: могу ли я использовать
Для кроссбраузерной совместимости для display: flex и align-items вы можете использовать следующее:
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
Я люблю прыгать по старым подножкам!
Вот обновление этого ответа за 2015 год. Я начал использовать CSS3 transform, чтобы делать грязную работу по позиционированию. Это позволяет вам не создавать лишний HTML, вам не нужно делать математику (находить половину ширины вещей), вы можете использовать ее для любого элемента!
Вот пример (со скрипкой в конце). Ваш HTML:
<div class = "bigDiv">
<div class = "smallDiv">
</div>
</div>
С сопровождающим CSS:
.bigDiv {
width:200px;
height:200px;
background-color:#efefef;
position:relative;
}
.smallDiv {
width:50px;
height:50px;
background-color:#cc0000;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
В наши дни я много делаю, так это даю урок тому, что я хочу сосредоточить, и просто повторно использую этот класс каждый раз. Например:
<div class = "bigDiv">
<div class = "smallDiv centerThis">
</div>
</div>
css
.bigDiv {
width:200px;
height:200px;
background-color:#efefef;
position:relative;
}
.smallDiv {
width:50px;
height:50px;
background-color:#cc0000;
}
.centerThis {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
Таким образом, я всегда смогу центрировать что-то в этом контейнере. Вам просто нужно убедиться, что объект, который вы хотите центрировать, находится в контейнере, для которого определен position.
Кстати: это работает и для центрирования БОЛЬШИХ div внутри МЕНЬШИХ div.
Простое и элегантное решение, которое работает для меня каждый раз:
<div>
<p style = "text-align:center"><img>Image here</img></p>
</div>
Это не всегда работает, например, с небольшим изображением с текстом на боку.
Я бы не советовал использовать атрибуты стиля вручную в HTML.
@sleepy Вы можете легко сделать это, используя следующие атрибуты:
#content {
display: flex;
align-items: center;
width: 200px;
height: 200px;
border: 1px solid red;
}
#myImage {
display: block;
width: 50px;
height: 50px;
margin: auto;
border: 1px solid yellow;
}<div id = "content">
<img id = "myImage" src = "http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">
</div>Ссылки: W3
Лучший способ центрировать изображение как по вертикали, так и по горизонтали - использовать два контейнера и применять следующие свойства:
Внешний контейнер
- должен иметь
display: table;
Внутренний контейнер
- должен иметь
display: table-cell; - должен иметь
vertical-align: middle; - должен иметь
text-align: center;
Демо
.outer-container {
display: table;
width: 80%; /* can be any width */
height: 120px; /* can be any height */
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner-container img {
background: #fff;
padding : 10px;
border : 1px solid #000;
}<div class = "outer-container">
<div class = "inner-container">
<img src = "http://s.gravatar.com/avatar/bf4cc94221382810233575862875e687?r=x&s=50" />
</div>
</div>Используйте позиционирование. Для меня сработало следующее:
div{
display:block;
overflow:hidden;
width: 200px;
height: 200px;
position: relative;
}
div img{
width: 50px;
height: 50px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
легкий
img {
transform: translate(50%,50%);
}
https://www.w3.org/Style/Examples/007/center.en.html
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto
}
<IMG class = "displayed" src = "..." alt = "...">
не обрабатывает вертикальный центр
Просто установите автоматическое поле изображения, как показано ниже.
img{
margin:auto;
width:50%;
height:auto;
}
Отметьте эти пример
Я пытался получить изображение по центру по вертикали и горизонтали в форме круга с помощью hmtl и css.
Объединив несколько пунктов из этой ветки, я пришел к следующему: jsFiddle
Вот еще один пример этого в макете из трех столбцов: jsFiddle
CSS:
#circle {
width: 100px;
height: 100px;
background: #A7A9AB;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: 0 auto;
position: relative;
}
.images {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
HTML:
<div id = "circle">
<img class = "images" src = "https://png.icons8.com/facebook-like-filled/ios7/50" />
</div>
Вот попробуйте это.
.parentdiv {
height: 400px;
border: 2px solid #cccccc;
background: #efefef;
position: relative;
}
.childcontainer {
position: absolute;
left: 50%;
top: 50%;
}
.childdiv {
width: 150px;
height:150px;
background: lightgreen;
border-radius: 50%;
border: 2px solid green;
margin-top: -50%;
margin-left: -50%;
}<div class = "parentdiv">
<div class = "childcontainer">
<div class = "childdiv">
</div>
</div>
</div>Вы можете установить положение изображения по центру по горизонтали с помощью этого
#imageId {
display: block;
margin-left: auto;
margin-right:auto;
}
Пользователю необходимо выравнивание для обеих позиций, это решает только половину его вопроса и, в зависимости от контекста вашего кода, даже не это.
.container {
height: 200px;
width: 200px;
float:left;
position:relative;
}
.children-with-img {
position: absolute;
width:50px;
height:50px;
left:50%;
top:50%;
transform:translate(-50%);
}
Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, как и / или почему он решает проблему, улучшит долгосрочную ценность ответа.
Этого легко добиться с помощью flex. нет необходимости в background-image.
<!DOCTYPE html>
<html>
<head>
<style>
#image-wrapper{
width:500px;
height:500px;
border:1px solid #333;
display:flex;
justify-content:center;
align-items:center;
}
</style>
</head>
<body>
<div id = "image-wrapper">
<img id = "myImage" src = "http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">
</div>
</body>
</html>div {
position: absolute;
border: 3px solid green;
width: 200px;
height: 200px;
}
img {
position: relative;
border: 3px solid red;
width: 50px;
height: 50px;
}
.center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}<div class = "center">
<img class = "center" src = "http://placeholders.org/250/000/fff" />
</div>Связанный: Центрировать изображение
Используйте Flexbox:
.outerDiv {
display: flex;
flex-direction: column;
justify-content: center; /* Centering y-axis */
align-items :center; /* Centering x-axis */
}
Хороший! Это действительно сработало и помогает, если вы не можете разместить изображение в качестве фона, как было предложено в предыдущем ответе.
Вот два простых метода центрирования элемента внутри div: по вертикали, горизонтали или по обоим направлениям (чистый CSS): stackoverflow.com/a/31977476/3597276