將兩行文本居中放在一行旁邊，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; 
}