CSS垂直對齊 - 優文庫

我有一個img浮動div，我不知道如何垂直居中。CSS垂直對齊

<div style="height: 300px"> 
    <img style="height: 50px" src="something" /> 
</div>

vertical-align：中間當然不起作用。

http://jsfiddle.net/wKQYj/

來源

2011-01-24 anonymous

這篇文章提到的兩種方式已經作爲單獨的答案給出了，但如果你知道`vertical-align`實際用於什麼：http://phrogz.net/css/vertical-align/ – scragz 2011-01-24 19:00:51

@scragz - 這是一個很好的鏈接。雖然，我不會使用`display：table-cell`。當然，我也不會使用我提出的'

'的答案。哈。 – Jason2011-01-24 19:09:38

https://pbs.twimg.com/media/B2mW8NiCQAA6IIP.jpg – walv 2014-11-18 14:10:27

回答

到父元素中垂直對齊文本，熊，一個img是一個內嵌 - 元素等行爲同樣文本，你可以簡單地設置line-height父元素的height：

div { 
    height: 300px; 
    line-height: 300px; 
}

JS Fiddle demo。

來源

2011-01-24 18:56:31

vertical-align屬性只在td元素真正的好。嘗試是這樣的：

<table> 
<tr> 
    <td style='height:300px; vertical-align:center'> 
    <img src='something'> 
    </td> 
</tr> 
</table>

或者因爲你知道img的高度和寬度：記住

<div style='height:300px;'> 
<img style='height:50px; position:relative; top:50%; margin-top:-25px'> 
</div>

來源

2011-01-24 18:53:47 Jason

ZOMG，以上都不對我好，我的意思是在css中有嚴重的漏洞，他們正在開發陰影等，我們必須仍然使用表或在divs divs垂直中心...聖牛。我必須使用div。而且我不能使用第二個代碼，因爲div高度會被用戶更改。所以我迷路了。 – anonymous 2011-01-24 18:56:04

@anonymous：你能夠使用JavaScript或任何JS庫（MooTools，Scriptaculous，jQuery，Glow ...）嗎？ – 2011-01-24 18:59:19

vertical-align CSS樣式指定文本行內文本的對齊方式。例如，這允許您將文本指定爲上標或下標。

所以它實際上並不打算在盒子中垂直對齊元素。

但有一個明確的例外情況 - 表格單元格（即<td>和<th>元素）使用vertical-align樣式完成以下操作：對齊單元格內的單元格內容。

這個例外是一個怪癖 - 它確實不應該存在。 CSS設計師爲了讓CSS能夠重現表格元素的valign屬性而將它放在那裏，這是設計師在基於表格佈局的黑暗時代通常使用的。

對於其他元素，將一個盒子的內容在其中間垂直對齊可能會有點美妙。有幾種技術：

對於單行文本，只是使line-height一樣的整個箱體的高度。你可能甚至不需要vertical-align。
使用display:table-cell;使元素模擬表格單元格，然後使用vertical-align。這是有效的，但可能會產生意想不到的後果（還有其他表格單元格的屬性可能不想模擬）。
如果你知道你要垂直對齊的元素的高度，可以將其定位到50％減去其高度的一半，這樣的：
```
position:absolute; 
top:50%; 
height:200px; 
margin-top:-100px; /* half the height */ 
```

有幾個人，但這些應該讓你開始。

希望有所幫助。

來源

2011-01-24 19:06:49 Spudley

對於每種情況，Javascript可能是最好的以圖像爲中心的垂直中心。如果你可以使用像jQuery這樣的庫，那隻需要幾行代碼。

$(function(){ 
    var containerHeight = $('#container').outerHeight(); 
    var imgHeight = $('#logo img').outerHeight(); 

    var difference = (containerHeight - imgHeight)/2; 
    $('#logo img').css({'position' : 'relative', 'top' : difference + 'px'});

}）;

來源

2011-01-24 19:12:23 heymrcarter

對於不使用表格的更新式（IE8 +）解決方案，我最喜歡this one。

<style> 
/* Can be any width and height */ 
.block { 
    height:500px; 
    text-align: center; 
} 

/* The ghost, nudged to maintain perfect centering */ 
.block:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

/* The element to be centered, can be any width or height */ 
.centered { 
    display: inline-block; 
    vertical-align: middle; 
    width: 300px; 
} 
</style> 

<div class="block"><div class="centered">Centered Content</div></div>

來源

2013-03-08 22:38:07 Justin

漂亮cool and modern approach（與指定的高度）：

.Absolute-Center { 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
}

來源

2013-09-08 22:45:11 Agat

我使用的顯示：框屬性：

#container { 
    display: box; 
    box-orient: vertical; 
    box-pack: center; 
} 

#text { 
    vertical-align: middle; 
}

看到JS-小提琴這裏：verical align js-fiddle

來源

2014-11-03 10:13:38 Ruwen

使用翻譯屬性，它很簡單，即使在IE中也能正常工作：

img { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

來源

2015-02-05 22:50:09 yulie

相關問題