;在中不会垂直对齐:中间,为什么?
我们有 CSS:
#left,#right{width:450px;height:450px;}
#left{position:absolute;left:20px;top:30px;}
#right{position:absolute;left:420px;top:30px;float:center;}
#left img, #right img{float:center; vertical-align:middle;cursor:pointer}
图像水平居中,但顶部对齐(我想要中间)
html 看起来像
<div id="media">
<div id="left"><img/></div> <div id="right"><img/></div>
</div>
知道我做错了什么吗?
顺便说一句,所有这些问题都是因为我显示具有不同分辨率的图像: S
编辑
这没有帮助...:(
#left,#right{width:450px;line-height:450px;}
#left{position:absolute;left:20px;top:30px;}
#right{position:absolute;left:420px;top:30px;float:center;}
#left img,#right img{cursor:pointer;}
we have CSS:
#left,#right{width:450px;height:450px;}
#left{position:absolute;left:20px;top:30px;}
#right{position:absolute;left:420px;top:30px;float:center;}
#left img, #right img{float:center; vertical-align:middle;cursor:pointer}
Image is horizotal centered, but gets top aligned (i want middle)
html looks like
<div id="media">
<div id="left"><img/></div> <div id="right"><img/></div>
</div>
Any idea what i'm doing wrong?
By the way, all this problem it's because i'm displaying images with different resolutions :S
EDIT
This didn't help... :(
#left,#right{width:450px;line-height:450px;}
#left{position:absolute;left:20px;top:30px;}
#right{position:absolute;left:420px;top:30px;float:center;}
#left img,#right img{cursor:pointer;}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您可以通过在 div 上设置行高来垂直对齐没有文本的 div 中的图像。例子:
you can vertical align an image in a div that has no text in it by setting line-height on the on the div. example:
首先,您需要在
#left
或#right
上声明一些高度,以使其垂直对齐。 (事实上,它没有比它所占用的空间更多的已知垂直对齐空间 - 所以它总是显示为顶部对齐。)其次,请确保您正确理解
vertical-align
。这是一个很好的资源:http://phrogz.net/css/vertical-align/index。 html 简而言之,vertical-align
可能不是最好的解决方案。You'll first off need to have some height declared on
#left
or#right
to get it to align vertically. (As it is, it has no more known space to align vertically in than the space it's taking up--so it will always appear top-aligned.)Secondly, make sure you understand
vertical-align
correctly. Here's a good resource: http://phrogz.net/css/vertical-align/index.html In short,vertical-align
is probably not the best solution.图像上的
vertical-align
是文本与图像对齐的方式,即文本环绕图像的方式。不是图像在div
中显示的方式。请在 StackOverFlow
vertical-align
on an image is how the text aligns to the image, the way the text wraps around the image. Not the way the image is displayed in thediv
.Please see this on StackOverFlow