在块级元素内垂直对齐块级元素 [英] Vertical align block level element inside a block level element
问题描述
我需要在固定宽度和高度的块级元素中对齐图像（可变宽度和高度）。 css标记看起来像这样：
I need to center align images (variable width and height) inside block level elements of fixed width and height. The css markup looks something like this:
<div style="float: left; width: 100px; height: 100px;"><img src="yada" width="50" height="60"></div>
<div style="float: left; width: 100px; height: 100px;"><img src="yada" width="60" height="50"></div>
<div style="float: left; width: 100px; height: 100px;"><img src="yada" width="75" height="75"></div>
关键在于图片与容器div的右上角对齐。我想让它们在水平和垂直方向上居中。我已经尝试设置img标签样式如下：
The point is, that the images align themselves to the top right corners of the container div. I want them to be centered, both horizontally and vertically. I have tried setting the img tag style as follows:
img {
display: block;
margin: auto;
}
这个中心水平对齐img，但不垂直。我需要这两个，使画廊页看起来整齐对齐。我需要尽量避免使用表，虽然这产生的结果正是我需要的。我需要一个可移植的，无hack的CSS解决方案。
This center-aligns the img horizontally but not vertically. I need both so that the gallery page looks neatly aligned. I need to avoid using tables at all cost although this produces the result exactly as I need. I need a portable, hack-less CSS solution.
推荐答案
是的，垂直边距是以一个根本不同的方式计算水平; 'auto'并不意味着居中。
Yes, vertical margins are calculated in a fundamentally different way to horizontal ones; ‘auto’ doesn't mean centering.
在图像元素上设置vertical-align：middle的作品，但它只是相对于行框。要使行框与浮点数相同，请在容器上设置'line-height'：
Setting ‘vertical-align: middle’ on the image elements sort of works, but it only aligns them relative to the line box they're currently on. To make the line box the same height as the float, set ‘line-height’ on the container:
<style>
div { float: left; width: 100px; height: 100px; line-height: 100px; }
div img { vertical-align: middle; }
</style>
您必须在标准模式，这是为了工作，因为否则浏览器渲染自己的图像作为块，而不是在文本行框中的换行元素。
You have to be in Standards Mode for this to work, because otherwise browsers render images-on-their-own as blocks instead of inline replaced elements in a text line box.
不幸的是，IE（至少7个）仍然保持块行为，即使在尝试在标准模式。有一个技术原因，这是IE是裤子。
Unfortunately, IE (up to 7 at least) still keeps the block behaviour even in its attempt at a Standards Mode. There is a technical reason for this, namely that IE is pants.
要说服IE，你真的的意思是图像是文本行的一部分，你必须在div中添加一些文本 - 即使是正常的空间也可以做到，但是你也可以尝试一个零宽度空间：
To persuade IE that you really mean it about the images being part of a text line, you have to add some text inside the div — even a normal space will do it, but you could also try a zero-width-space:
<div><img src="http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png" width="50" height="60" />​</div>
<div><img src="http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png" width="60" height="50" />​</div>
<div><img src="http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png" width="75" height="75" />​</div>
这篇关于在块级元素内垂直对齐块级元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
