垂直对齐<span>元素</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元素附加到上面边框的底部，只想float: right并将其对齐到div的右边。不想也使用line-height。

Answer 1

如果您想要一个不包含 line-height 和float的解决方案，您还希望对齐 {{1}到右边 ....

然后将span用于将嵌套子元素设置为display: table;的父元素

Demo

display: table-cell;

Answer 2

您想将vertical-align: middle;添加到h1

Fiddle