0

我知道这很烦人，似乎 CSS 中的垂直对齐是常见的陷阱，但我真的需要你的帮助。

我希望文本始终位于图像左侧的“中间”垂直位置（图像 test.gif 具有不同的尺寸）

我有这样的html元素结构（不幸的是，由于系统限制，我无法更改它）

<div class="wrapper">
    <div class="logo"> 
        <img alt="some text" src="http://localhost/test.gif">
    </div> 
    <div  class="source">some text</div>
</div>

CSS：

.wrapper {clear: both;}
.logo {float: left;}
.source { float: left;line-height: 16px;}

花了1.5个小时，没有运气。试图将垂直对齐应用于具有不同定位的不同元素等...请帮助！

4

2 回答 2

0

一个常见问题，但在这里解释得很好：http: //phrogz.net/css/vertical-align/

关键点

将父容器指定为position:relative或position:absolute

在子容器上指定一个固定高度。

设置 position:absolute 和top:50%on 子容器将顶部向下移动到父容器的中间。

将margin-top:-yyyy 设置为子容器高度的一半以向上偏移项目。

<style type="text/css">
    #myoutercontainer { position:relative }
    #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>

...

<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>
于 2013-10-08T19:08:42.297 回答
0

如果你不需要支持 IE7，试试这个：

.wrapper { display: table; }
.logo { display: table-cell; }
.source { display: table-cell; vertical-align: middle; }

基本上，表格让您可以选择垂直对齐到中间，通过让您div的 s 像表格一样，我们可以模仿该选项。

于 2013-10-08T19:18:41.660 回答