中心图像具有相等的水平和垂直间距

我有一个包含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>

这些图像大小不均匀，但我他们都迫使至150像素。但我想，这样他们每一个无形的框，需要的水平和垂直空间同样数额内奠定了一个格子状的图像。我希望每个图像都位于其隐形框内。在图像周围的div只是与定位/位置，以帮助 - 如果他们没有必要为实现这一布局，这很好。问题是，每个图像被放置在它的div的左上角，而不是在中心。这里是ImageBox类：在下面的图片左上角的对齐，而不是中心的截图

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

通知。我怎样才能解决这个问题？

enter image description here

来源

2015-06-29 HerrimanCoder

添加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/

来源

2015-06-29 16:06:27

的伟大工程。谢谢魔术师。 – HerrimanCoder

该W为你工作不好。

<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>

来源

2015-06-29 19:09:42

中心图像具有相等的水平和垂直间距

回答

相关问题