Изображение центра в div горизонтально

Ответ 1

Каждое решение, размещенное здесь, предполагает, что вы знаете размеры вашего img, что не является общим сценарием. Кроме того, установка размеров в решение является болезненным.

Просто установите:

display: block /*for the img inside your div */  
margin-left: auto 
margin-right: auto 

или

display: block /*for the img inside your div */ 
margin: 0 auto 

Что все.

Обратите внимание, что вам также нужно будет установить начальный min-width для внешнего div.

Ответ 2

text-align: center будет работать только для горизонтального центрирования. Чтобы он находился в полном центре, вертикальном и горизонтальном, вы можете сделать следующее:

div
{
    position: relative;
}
div img
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: [-50% of your image width];
    margin-top: [-50% of your image height];
}

Ответ 3

Очень простое и элегантное решение для этого обеспечивается W3C. Просто используйте поле margin: 0 auto declaration следующим образом:

.top_image img { margin:0 auto; }

Дополнительная информация и examples от W3C.

Ответ 4

<div class="outer">
    <div class="inner">
        <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s320/tall+copy.jpg" alt="tall image" />
    </div>
</div>
<hr />
<div class="outer">
    <div class="inner">
        <img src="http://www.5150studios.com.au/wp-content/uploads/2012/04/wide.jpg" alt="wide image" />
    </div>
</div>

CSS

img
{
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto auto;
}

.outer
{
    border: 1px solid #888;
    width: 100px;
    height: 100px;
}

.inner
{
    display:table-cell;
    height: 100px;
    width: 100px;
    vertical-align: middle;
}

Ответ 5

Я думаю, что лучше сделать центр выравнивания текста для div, и пусть изображение позаботится о высоте. Просто укажите верхнее и нижнее дополнение для div, чтобы иметь место между изображением и div. Посмотрите на этот пример: http://jsfiddle.net/Tv9mG/

Ответ 6

Я надеюсь, что это было бы полезно:

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

Ответ 7

Это заняло у меня слишком много времени, чтобы понять. Я не могу поверить, что никто не упоминал центральные теги.

Пример:

<center><img src = "yourimage.png"/></center>

и если вы хотите изменить размер изображения в процентах:

<center><img src = "yourimage.png" width = "75%"/></center>

GG America