Как центрировать тег <img>html с помощью css в Opera?

Question

У меня есть следующий код CSS, используемый для центрирования тега <img>

.img {
      position:absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
}

Приведенный выше код работает в Firefox, Safari, Chrome и IE8.

Но в Opera это не работает

Если я добавлю padding-top к приведенному выше коду, он испортит другие браузеры, но опера работает.

Как мне настроить таргетинг на Opera для padding-top или решить проблему с центрированием в Opera?

Answer 1

Если все, что вы пытаетесь сделать, это центрировать изображение, все, что вам нужно сделать, это:

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

Answer 2

Вы можете поместить свое изображение в блок Div, а затем отцентрировать его.

#image {
 width: 100px;
 height: 100px;
 margin: 0 auto;
}

вам нужно только настроить height и width вашего Div Box

Answer 3

Я только что протестировал его в Chrome и IE 10.

<div style="margin: 0 25%; width:800px;">
   <img src="~/Images/yourimage.png" width="300" height="300" style=" margin: auto;" />
</div>

Answer 4

если ваша задача состоит в том, чтобы центрировать изображение, существует множество решений, для которых элемент должен поместить элемент в тег <center>. Второе решение зависит от ширины изображения, например, если ширина изображения равна 300, вы можете использовать этот код .img{position:absolute;left: 50%;margin-left: -150px;}

и использование top:0 с bottom:0

- это плохая практика

Answer 5

Я бы сделал это с

<div id="div" ....>
  <img ...>
</div>

и стилем

#div {
    width:980px;
margin:10px auto 40px auto;
}

Я часто использую это для центрирования моего сайта.Может быть, это работает непосредственно на IMG.

Answer 6

Попробуйте использовать объект JavaScript Navigator, чтобы определить, является ли браузер Opera или нет. navigator.appName

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

Answer 7

Попробуйте удалить сверху, справа, снизу, слева.

img {
      position:absolute;
      margin: auto;
      /*If it doesn't do it, try to add display: block; also*/
}

и убедитесь, что вы ссылаетесь на тег img, а не на класс .img, но я предполагаю, что это только опечатка.