水平和垂直间距相等的div中的中心图像
[英]Center images in a div with equal horizontal and vertical spacing
问题描述
I have a div containing 10 images, each with its own div: 
我有一个包含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>
These images are not uniform in size but I am forcing them all to 150px. 这些图像的大小不一致，但我将所有图像都强制设为150px。 But I want to lay out the images in a grid-like fashion so that they're each inside an invisible box that takes the same amount of horizontal and vertical space. 但是我想以类似网格的方式对图像进行布局，以使它们每个都位于一个不可见的盒子中，该盒子需要等量的水平和垂直空间。 And I want each image centered inside its invisible box. 我希望每个图像都在其不可见框内居中。 The divs around the images are just to aid with positioning/placement--if they're not necessary to achieve this layout, that's fine. 图片周围的div仅用于定位/放置-如果不需要它们来实现此布局，那很好。 The problem is that each image gets positioned at the top left of its div, rather than in the center. 问题在于每个图像都位于其div的左上角，而不是在中心。 Here is the ImageBox class: 这是ImageBox类：
.ImageBox{
float:left;
width:177px;
height:177px;
display:block;
margin: 0 auto;
}
Notice in the screenshot below how the image aligns in the top-left rather than the center. 请注意下面的屏幕快照，图像如何在左上角而不是在中心对齐。 How can I fix this? 我怎样才能解决这个问题？
2 个解决方案
解决方案1
2 已采纳 2015-06-29 16:06:27
Add text-align and line-height to your ImageBox class: 向您的ImageBox类添加text-align和line-height ：
.ImageBox {
float:left;
width:177px;
height:177px;
display:block;
margin: 0 auto;
text-align: center;
line-height: 177px;
}
Add a vertical-align to your images: 向图像添加vertical-align ：
.ImageBox > img {
vertical-align: middle;
}
JsFiddle: http://jsfiddle.net/ghorg12110/e71f0txq/ JsFiddle： http : //jsfiddle.net/ghorg12110/e71f0txq/
解决方案2
0 2015-06-29 19:09:42
this will work for you. 这将为您工作。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.