如何垂直居中跨度和一個列表內的div？

我有一個div固定在瀏覽器的頂部。 div具有100％的寬度和90px的高度。裏面是應該在左邊的一段文字和應該在右邊的水平列表。現在，我將跨度向左和列表右移。我怎樣才能垂直中心跨度和列表內的div？如何垂直居中跨度和一個列表內的div？

2012-08-04 Ryan

有這篇文章中垂直居中技術，良好的故障，我沒有使用任何除我的答案如下：http：//css-tricks.com/centering-in-the-unknown/ – Ila 2012-08-04 10:45:19

這裏有一個解決方案...

...使用該上的跨度和李

display:inline-block; 
line-height:70px; 
height: 70px;

來源

2012-08-04 06:49:03 neokio

或筆+ whiteout？ – neokio 2012-08-04 06:59:10

不幸的是，垂直對齊方式只適用於表細胞（即：TD和TH元素）。
所以你必須使用TABLE爲了垂直對齊內容。

<html> 
<head> 
    <style> 
    .text   { float: left; } 
    .list   { list-style: none; float: right; margin: 0; } 
    .list li  { float: left; } 
    #vdivwrap  { width: 100%; } 
    #vdivcontent { height:90px; vertical-align: center; background:#8c8; } 
    </style> 
</head> 
<body> 
    <table id="vdivwrap" border="0" cellspacing="0" cellpadding="0"> 
    <td id="vdivcontent"> 
     <span class="text">[text span]</span> 
     <ul class="list"> 
     <li>[list item 1]</li> 
     <li>[list item 2]</li> 
     </ul> 
    </td> 
    </table> 
</body> 
</html>

來源

2012-08-04 10:20:25 Jay

如果你知道你的標題跨度的高度& UL的內容，你可以用

position:absolute /* or relative */; 
top:50%; 
margin-top: -X /* where X is half the height of your content. That's a negative margin pulling the content up so it's center aligns with the center of the parent div */;

做到這一點在這裏看到：http://jsfiddle.net/XAgyv/1/

我還沒有找到什麼好的方法可以做到這不知道內容的高度要垂直居中 - 我期待看到其他答案。

來源

2012-08-04 10:39:19 Ila

另一個解決辦法是增加另一個CSS規則如下

span, ul { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
}

這裏工作的jsfiddle http://jsfiddle.net/logiccanvas/4keeS/9/

來源

2016-02-23 05:17:06

如何垂直居中跨度和一個列表內的div？

回答

相關問題