将两行文本居中放在一行旁边，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魔术和保证金/填充调整。一切都自动对齐。

Answer 2

我不认为你需要那些个月和年跨度。浮动它们的容器就足够了。还有一个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; 
}