Question

我有一个＆lt; div>被称为容器的包装图像和另一个小的＆lt; d i v＆gt;。问题是，我正在尝试将图像对齐在容器的中心。如果这是一个很大的形象。它将适合中间，但如果它是一个小图像，它将倾向于左侧。如何在中间放置图像位置？没有使用保证金。因为如果我使用边距，小图像将位于中心，但大图像将倾斜到右侧。

我的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 }

CSS将图像对齐中心错误

3 个答案: