垂直對齊不起作用

Question

我知道這很煩人，似乎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個小時，沒有運氣。 試圖將垂直對齊應用於具有不同位置等的不同元素...請幫助！

Answer 1

一個常見的問題，但在這里得到了很好的解釋： http : //phrogz.net/css/vertical-align/

關鍵點

將父容器指定為position:relative或position:absolute

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

在子容器上設置position：absolute和top:50% ，以將頂部向下移動到父容器的中間。

設置margin-top:-yy ，其中yy是子容器高度的一半，以向上偏移項目。

<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>

Answer 2

如果不需要支持IE7，請嘗試以下操作：

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

基本上，表格為您提供了垂直對齊中間位置的選項，通過使div像表格一樣，我們可以模仿該選項。