;在
中不会垂直对齐:中间,为什么?

发布于 2024-10-29 07:54:40 字数 876 浏览 5 评论 0原文

我们有 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

私藏温柔 2024-11-05 07:54:40

您可以通过在 div 上设置行高来垂直对齐没有文本的 div 中的图像。例子:

<div style="height: 100px; line-height: 100px;">
    <img src="http://nelson-haha.com" height="50" style="vertical-align: middle;"/>
</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:

<div style="height: 100px; line-height: 100px;">
    <img src="http://nelson-haha.com" height="50" style="vertical-align: middle;"/>
</div>
你好,陌生人 2024-11-05 07:54:40

首先,您需要在 #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.

弥枳 2024-11-05 07:54:40

图像上的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 the div.

Please see this on StackOverFlow

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文