html - 两行文本并排居中，HTML/CSS

Question

所以我已经在 jsfiddle 中实现了我想要实现的目标。我想知道是否有更简单的方法来达到同样的效果:

<div class="date"> 
<span class="day">05</span>
<div class="dateHolder">
    <span class="month">DEC</span>
     <span class="year">2013</span>
</div>

.date {
position: absolute;
font-family: Arial;
font-weight: bold;
background: rgba(0, 0, 0, 0.8);
color: #fff;
width: 110px;
height: 60px;
padding: 10px;
}
.dateHolder {
    margin-top: 10px;
}
.day {
    font-size: 50px;
    line-height: 60px;
    float: left;
}
.month, .year {
    float: right;
    font-size: 20px;
    line-height: 20px;
    display: block;
}

Answer 1

我认为布置日期的这些部分并垂直居中的最简单方法是 to use CSS table model :

.date {
    font-family: Arial;
    font-weight: bold;
    position:absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    width: 110px;
    height: 60px;
    padding: 10px;
    display: table;
}
.dateHolder {  
    display: table-cell;
    vertical-align: middle;
    text-align: right;    
    font-size: 20px;
    line-height: 21px;
}
.day {
    font-size: 50px;
    line-height: 60px;
    display: table-cell;
    vertical-align: middle;
}
.dateHolder > span {
    display: block;
}

无需clearfix魔法和边距/填充调整。一切都会自动对齐。