在固定高度的空间中垂直分布图像 [英] Evenly distribute images vertically within fixed-height space

问题描述

我有3个图像垂直对齐在固定高度div。

假设Div的高度为100像素，图像的高度为20像素，那么我们如何确保它们之间的顶部和底部填充。所以3图像与20px将总和为60px。

类似地，当添加另一个图像时，剩余的20px应该是所有图像之间的总填充。

属性：vertical-align：middle在这里不起作用。

解决方案

想要：

1. 将div设置为 display：table


2. 使用在元素中将每个< img> 覆盖display：table-row 和 display：table-cell


3. 将图片设置为 display：block


4. 将表格单元格元素设置为 vertical-align：middle



b b 这将导致空间垂直均匀分布。




演示： http://jsfiddle.net/X2URZ/2/





代码：

  < ul id =img-list> 
< li>< span>< img src =http://phrogz.net/tmp/gkhead.jpg>< / span>< / li> 
< li>< span>< img src =http://phrogz.net/tmp/gkhead.jpg>< / span>< / li> 
< li>< span>< img src =http://phrogz.net/tmp/gkhead.jpg>< / span>< / li> 
< / ul> 
  





 ＃img-list {display：table; height：100px} 
＃img-list img {height：20px; display：block} 
＃img-list li {display：table-row} 
＃img-list li span {display：table-cell; vertical-align：middle; background：red} 
＃img-list li：first-child，
＃img-list li：last-child {height：20px} 
  pre> 
I have 3 images vertically aligned in fixed height div. How can I make sure that the top and bottom padding between them remains even when an image is added or deleted.

Say the Div height is 100px and the image height is 20px. So 3 images with 20px would sum up to 60px. The remaining 40px should evenly get distributed as padding between the images.

Similarly when another image is added, the remaining 20px should be total padding between all images.

The property : vertical-align: middle is not working here.
解决方案
You want to:

set the div to display:table with a fixed height,
wrap each <img> in element with display:table-row and display:table-cell
set the images to display:block
set the table-cell elements to vertical-align:middle
set the height of the first and last rows to be exactly as tall as the images themselves
This will cause the space to be evenly distributed vertically.

Demo: http://jsfiddle.net/X2URZ/2/

Code:
<ul id="img-list">
  <li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
  <li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
  <li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
</ul>​


#img-list { display:table; height:100px }
#img-list img { height:20px; display:block }
#img-list li { display:table-row }
#img-list li span { display:table-cell; vertical-align:middle; background:red }
#img-list li:first-child,
#img-list li:last-child { height:20px }​


                        
这篇关于在固定高度的空间中垂直分布图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！