Question

我有一个包含10个图像的div，每个图像都有自己的div：

<div id="TankDialog" title="Choose Tank" style="display:none">
      <div class="ImageBox"><img src="images/tanks/tank1.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank2.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank3.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank4.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank5.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank6.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank7.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank8.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank9.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank10.png" style="width:150px" /></div>
</div>

这些图像尺寸不均匀，但我将它们全部强制为150px。但我希望以网格状的方式布置图像，以便它们分别位于一个隐藏的盒子里面，这个盒子占用相同数量的水平和垂直空间。我希望每个图像都在其隐形框内。图像周围的div只是为了帮助定位/放置 - 如果他们没有必要实现这种布局，那很好。问题是每个图像都位于其div的左上角，而不是位于中心。这是ImageBox类：

.ImageBox{
    float:left;
    width:177px;
    height:177px;
    display:block;
    margin: 0 auto;
}

请注意下面的屏幕截图中图像如何在左上角而不是中心对齐。我该如何解决这个问题？

enter image description here

Answer 1

将text-align和line-height添加到ImageBox类：

.ImageBox {
    float:left;
    width:177px;
    height:177px;
    display:block;
    margin: 0 auto;
    text-align: center;
    line-height: 177px;
}

为您的图片添加vertical-align：

.ImageBox > img {
    vertical-align: middle;
}

JsFiddle：http://jsfiddle.net/ghorg12110/e71f0txq/

Answer 2

这对你有用。

<html>
    <head>
        <title>Choose Tank</title>
        <style>
            .ImageBox{
                border: 2px solid red;
                float:left;
                width:177px;
                height:177px;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }
        </style>
    </head>
    <body>
        <div id="TankDialog" title="Choose Tank" style="width:660px;margin: 0 auto; " >
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank1.png');"></div>
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank2.png');"></div>
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank3.png');"></div>
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank4.png');"></div>
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank5.png');"></div>
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank6.png');"></div>
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank7.png');"></div>
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank8.png');"></div>
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank9.png');"></div>
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank10.png');"></div>
        </div>
    </body>
</html>

在具有相等水平和垂直间距的div中居中图像

2 个答案: