如何居中<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;
}

您只需要調整 Div Box 的height和width

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

嘗試刪除頂部，右側，底部，左側。

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

並確保您引用的是標簽img而不是 class .img但我認為這只是一個錯字。

Answer 5

嘗試使用 JavaScript Navigator object 來識別瀏覽器是 Opera 還是不是navigator.appName

自從我使用 jQuery 以來，我從未親自使用過它，但是對於這么小的東西，jQuery 將是一個很大的開銷。

Answer 6

我會用一個

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

和風格

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

我經常使用它來使我的網站居中。 也許它直接在img上工作。

Answer 7

如果您的問題是使圖像居中，則有一組解決方案首先是將元素放在<center>標記中第二個解決方案取決於圖像寬度，例如如果圖像寬度為 300，您可以使用此代碼.img{position:absolute;left: 50%;margin-left: -150px;}

使用top:0和bottom:0是一種不好的做法