HTML / CSS图像不包装

Question

我正在尝试建立一个网站，当我尝试为图像制作包装时，没有任何反应。目的是制作一个带有图像的部分，我可以将其用作背景，包装器按顺序保存内容（居中等）。

CSS

.image-wrapper {
    width:150px;
    margin:0 auto;
}

HTML

<section>
    <img src="img/animebreeze.jpg" alt="animeb-image">
    <div class="image-wrapper">
    </img>
    </div>
</section>

Answer 1

您的HTML </img>

中有错误

<section>
    <img src="img/animebreeze.jpg" alt="animeb-image">
        <div class="image-wrapper">
    </img>
</div> </section>

应该是

<section>
    <div class="image-wrapper">
        <img src="img/animebreeze.jpg" alt="animeb-image">
    </div>
</section>

Fiddle

Answer 2

将img标记放在image-wrapper。

中

<img>标记没有结束标记。 <删除>

<强> CSS

.image-wrapper { margin: 0 auto; }  

<强> HTML

<section>
      <div class="image-wrapper"><img src="img/animebreeze.jpg" alt="animeb-image"></div>
    </section>

您也可以尝试这种方式：

<强> CSS

.image-wrapper { background: url(img/animebreeze.jpg)no-repeat center center; }

在CSS中使用background-image，您现在不使用<img>标记。