垂直对齐块元素的形象？ [英] Vertically aligning block element to image?
问题描述
我在寻找一种方式来垂直对齐块元素的图像。在我的网站这个形象将在高度和宽度，动态变化，所以我需要垂直对齐，以适应不管什么图像尺寸。例如：
I'm looking for a way to vertically align a block element to an image. On my site this image would dynamically change in height and width so I'd need the vertical alignment to adapt for whatever the image size is. For example:
<img src="photo.jpg" alt="test" />
<div id="box">
</div>
img { float: left; }
#box { float: right; width: 200px; height: 150px; background-color: #666; }
所以我想这个div来垂直对齐自身的形象。如何才能做到这一点？ 谢谢你。
So I'd want this div to vertically align itself to the image. How can this be done? Thanks.
推荐答案
关键是要增加的包装，div的一对夫妇层。第一层设置为空白：NOWRAP 和最大宽度：50％，这意味着里面的元素不能完成，并且被限制到母体的宽度的50％。
The trick is to add a couple layers of wrapper-divs. The first layer is set to white-space: nowrap and max-width:50% which means that the elements inside can't wrap, and are constrained to 50% of the width of the parent.
然后您将空格恢复正常，使第二层显示：inline-block的使这些div的必须通过文本对齐方式的规则。然后，设置的两个的人，以垂直对齐：中间; 刚一会都不行，因为垂直对齐是相对于在基准的文字，不包含块元素。
Then you set the white space back to normal, and make the second layer display:inline-block so that these divs have to play by text alignment rules. Then you set both of them to vertical-align:middle; Just one won't work because vertical align is relative to the baseline of the text, not the containing block element.
因此，在这种方式我们已经约束自己，一线文本的，两个div元素组成的两个对准，它们的中间位置在文本基线，并确保它们的尺寸必须是父的不超过50％容器。
So in this way we have constrained ourselves to one line of "text", composed of two div elements both aligned such their middle is at the text baseline, and ensured that their size must be no more than 50% of the parent container.
编辑：我发现后，多一点玩耍，你需要添加一些最大宽度：100％，以保持图像的推文出右侧
I discovered after little more playing that you need to add some max-width:100% to keep the image from pushing the text out the right hand side.
编辑2：我应该提到这一点需要IE浏览器8标准模式下，加元当量告诉IE 8的行为本身，而是给人一种适当的doctype或发送一个HTTP响应头可以实现同样的事情，谷歌IE8标准模式，所有的东西。
EDIT 2: I should have mentioned that this requires IE-8 standards mode, added meta-equiv to tell IE-8 to behave itself, but giving a proper doctype or sending an http response header can achieve the same thing google IE8 standards mode for all that stuff.
<html >
<head>
<title>Test</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<style type="text/css">
.wrapper1 {
white-space:nowrap;
max-width:50%;
}
.wrapper2 {
white-space:normal;
display:inline-block;
vertical-align:middle;
max-width:100%;
}
.variable-img {
max-width:100%;
}
</style>
</head>
<body>
<div class="wrapper1">
<div class="wrapper2">
<img class="variable-img" src="test.png">
</div>
<div class="wrapper2">
<div id="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum</div>
</div>
</div>
</body>
</html>
这篇关于垂直对齐块元素的形象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
