CSS 居中对齐图像错误

Question

我有一个名为 container 的

，它包装了一个图像和另一个小的 。问题是，我试图将图像对齐到容器的中心。如果是大图。它将适合中间但如果它是一个小图像，它会向左侧倾斜。如何使图像位置居中？不使用 margin 。因为如果我使用 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>

最佳答案

以这种方式更改您的 CSS:

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

关于CSS 居中对齐图像错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16123146/

Answer 1

以这种方式更改您的 CSS:

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