2

我有一个名为容器的 < 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>
4

3 回答 3

2

以这种方式更改您的 CSS：

img {margin: 10px auto; display: block;}
于 2013-04-20T17:29:00.377 回答
1

尝试这个 。W3C

http://jsfiddle.net/QsN6q/

img{
    display: block;
    margin-left: auto;
    margin-right: auto }
于 2013-04-20T17:30:02.483 回答
1

为您的图像创建一个包装器 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>

或者您可以使用自动边距自动将边距宽度设置为等于img;

image {margin: 0 auto;}

但是你说你不想使用保证金，选择权在你！

祝你好运

于 2013-04-20T17:27:11.240 回答