Question

我一直试图将图片置于我页面上的div中。

相关HTML：

<div class="imgblock">
        <div class="basket slide1"><a href="#">
          <div class="images">
            <div class="img-wrap"><img src="images/basket.jpg" alt="" align="center"/ </div>
            <div class="infos"></div>
          </div>
          </a></div>
        <div class="steak slide2"><a href="#">
          <div class="images">
            <div class="img-wrap"><img src="images/steak.jpg" alt="" /></div>
            <div class="infos"></div>
          </div>
          </a></div>
        <div class="col1-4 slide3"><a href="#">
          <div class="images">
            <div class="img-wrap"><img src="images/breakfast.jpg" alt="" /></div>
            <div class="infos"></div>
          </div>
          </a></div>
        <div class="fish slide4"><a href="#">
          <div class="images">
            <div class="img-wrap"><img src="images/fish.jpg" alt="" /></div>
            <div class="infos"></div>
          </div>
          </a></div>
</div>

相关CSS：

.imgblock {
width:940px;
text-align:center;
vertical-align:middle;
margin:0 10px;
}

在我的研究中，我被告知要添加text-align：center和vertical-align：middle。这没有用，我还尝试了margin-left：auto和margin-right：auto。

感谢您的帮助。

Answer 1

正如@mdesdev所说，推荐的中心块项目的方法是：

margin: 0 auto;

这也适用于您的图像。我会做这样的事情（未经测试）：

.imgblock img{
    display: block;
    margin: 0 auto;
}

你也可能没有一些周围的div。

Answer 2

由于您的图片是浮动的，因此您只能减少.imgblock的宽度并使用自动边距：

.imgblock {
width:830px;
margin:0 auto;;
}

Answer 3

你可以尝试

.basket {
    margin: 0 10px 0 320px;
    width: 300px;
}

CSS将一堆图像放在div中

3 个答案: