CSS居中對齊圖片錯誤

Question

我有一個稱為容器的<div>包裝圖像和另一個小的<div>。 問題是，我正在嘗試將圖像對准容器的中心。 如果這是一個大形象。 它適合中間，但如果是小圖像，則將偏向左側。 如何使圖像位於中間位置？ 不使用保證金。 因為如果我使用margin，則小圖像將在中間，但大圖像將向右側傾斜。

我的CSS

 .container{background-color: #ED8713; 
 height: 300px; 
 width: 300px;
 margin: 60px;}

 .box6{background-color: #FFFFFF;
  width: 270px;height:80px;
 margin: 5px;}
 img {margin: 10px;}

我的HTML

<meta charset="utf-8" />
<link rel="stylesheet" href="float.css">



<div class="container"><img src="s.jpg"/>
                    <div class="box6"></div>

</div>

<div class="container"><img src="q.jpg"/>
                    <div class="box6"></div>

</div>

Answer 1

通過以下方式更改CSS：

img {margin: 10px auto; display: block;}

Answer 2

為您的圖像創建一個包裝div並將包裝div的css設置為；

#wrapper {text-align: center;}

這會將包裝器中的所有元素設置為容器的中心，因為包裝器div是塊元素，因此將是父div寬度的100％。

完整的例子

#wrapper {text-align: center;}

<div id="container">
    <div id="wrapper"><img /></div>
    <div id="small"><p>Some text</p></div>
</div>

或者您可以使用margin auto自動將img上的邊距寬度設置為相等；

image {margin: 0 auto;}

但是您說過您不想使用保證金，選擇權就在您手中！

祝好運

Answer 3

嘗試這個 。 W3C

http://jsfiddle.net/QsN6q/

img{
    display: block;
    margin-left: auto;
    margin-right: auto }