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

我认为您不需要那些月份和年份的跨度。漂浮他们的容器就足够了。还缺少clearfix。这是更新的 jsfiddle http://jsfiddle.net/krasimir/2gwwB/3/ 这是我能想到的最简单的标记和 css。

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

CSS：

.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;
}
.date:after {
    content: "";
    clear: both;
    display: block;
}
.dateHolder {
    margin: 7px 0 0 10px;
    float: left;
}
.day {
    display: block;
    font-size: 50px;
    float: left;
}

Answer 2

我想布置日期的这些部分并将它们垂直居中的最简单方法是使用 CSS 表格模型：

.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 魔术和边距/填充调整。一切都自动对齐。