Почему не краем: автоцентр изображения? - PullRequest
Новая
       3

Почему не краем: автоцентр изображения?

88 голосов
/ 10 июня 2010 
<html>
<head>
<title>Test</title>
</head>
<body>
    <div>
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>

div расширяется до 100%, как и должно, но изображение не центрируется. Почему?

Ответы [ 8 ]

185 голосов
/ 10 июня 2010

Поскольку ваше изображение является элементом встроенного блока .Вы можете изменить его на элемент уровня блока , например: 

<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />

, и он будет отцентрирован.

10 голосов
/ 10 июня 2010

Вам нужно сделать это как уровень блока; 

img {
   display: block;
   width: auto;
   margin: auto;
}
8 голосов
/ 10 июня 2010

Добавить style="text-align:center;"

попробуйте ниже код 

<html>
<head>
<title>Test</title>
</head>
<body>
    <div style="text-align:center;vertical-align:middle;">
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>
1 голос
/ 27 октября 2015

Я обнаружил, что должен определить конкретную ширину для объекта, иначе ничто не сделает его центром. Относительная ширина не работает.

1 голос
/ 09 октября 2013

Я знаю, что это старый пост, но хотел бы поделиться, как я решил ту же проблему.

Мое изображение наследовало число с плавающей точкой: слева от родительского класса.Установив float: none, я смог настроить поле: 0 автоматически и отобразить: блок работает правильно.Надеюсь, что это может помочь кому-то в будущем.

0 голосов
/ 01 апреля 2016

Я нашел ... поле: 0 авто;работает для меня.Но я также видел, что это НЕ работает из-за того, что класс перегружен другой спецификой, которая ... float: left;так что следите за тем, что вам может понадобиться добавить ... float: none;в моем случае это работало, когда я кодировал медиа-запрос.

0 голосов
/ 10 июня 2010

открыть div затем поставить 

style="width:100% ; margin:0px auto;"

image тег (или) содержимого

закрыть div

0 голосов
/ 10 июня 2010 
<div style="text-align:center;">
    <img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...