如何将 居中Opera 中带有 css 的 html 标签？

Question

我有以下 CSS 代码用于使 标签居中

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

上面的代码适用于 Firefox、Safari、Chrome 和 IE8。

但它在 Opera 中不起作用

如果我在上面的代码中添加 padding-top ，它会弄乱其他浏览器，但 Opera 可以工作。

如何将 Opera 定位为 padding-top 或解决 Opera 的居中问题？

Answer 1

如果您想要做的只是将图像居中，那么您需要做的就是：

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

Answer 2

您可以将图像放入 Div 框中，然后将其居中。

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

您只需调整 Div Box 的高度和宽度

Answer 3

尝试删除顶部、右侧、底部、左侧。

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

并确保您引用的是标签 img 而不是类 .img 但我认为这只是一个拼写错误。

Answer 4

尝试使用 JavaScript Navigator 对象来识别浏览器是否是 Opera navigator.appName

自从我使用 jQuery 以来，我从来没有亲自使用过它，但是对于这么小的事情，jQuery 将是一个很大的开销。

Answer 5

我会用 a 来制作它

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

，并且

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

我经常使用它来居中我的网站。
也许它直接作用于img。

Answer 6

如果您的问题是使图像居中，则有一组解决方案，第一个是将元素放入

标记中，第二个解决方案取决于图像宽度，例如，如果图像宽度为 300可以使用此代码 .img{position:absolute;left: 50%;margin-left: -150px;}

并且使用 top:0 是一个不好的做法和底部：0

Answer 7

我刚刚在 Chrome 和 IE 10 中测试了它。

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

Answer 8

最好的方法是这样的：

//html (no css is needed)
 <center><img src = ""></center>