垂直對齊<span>元素

Question

HTML

<div class="main"> 
    <h1>Test</h1> 
    <span class="details">Jan 21, 2014</span> 
</div> 

CSS

.main{ 
    background-color: #666666; 
    border: 1px solid red; 
} 
h1{ 
    background-color: #383838; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
} 
.main span{ 
    display: inline-block; 
    vertical-align: middle; 
} 

jsFiddle

這似乎是一個真正的簡單的問題，但我不能修復它，要麼我太懶惰了。只需要vertical-align: middle並將其對齊到div的右側，如果我使用float: right該元素附着到上方邊框的底部。也不想使用line-height。

Answer 1

如果你想一個解決方案，不包括line-height，並float，你也想對齊的span到權 ....

然後使用display: table;父元素具有嵌套的子元素設置爲display: table-cell;

Demo

.main{ 
    background-color: #666666; 
    border: 1px solid red; 
    display: table; 
    width: 100%; 
} 
h1{ 
    background-color: #383838; 
    display: table-cell; 
    margin: 0; 
    padding: 0; 
    width: 20%; 
} 
.main span{ 
    display: table-cell; 
    vertical-align: middle; 
    text-align: right; 
} 

Answer 2

您要添加vertical-align: middle;您h1

Fiddle