'Centering two lines of text next to one line, HTML/CSS

So I've made what I'm looking to achieve in jsfiddle. I'm wondering if there is an easier way to achieve this same effect:

Image reference

<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;
}
htmlcss


Solution 1:[1]

I suppose that the simplest way to lay out these parts of the date and center them vertically is 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;
}

No need in clearfix magic and margin/padding adjustment. Everything is aligned automatically.

Solution 2:[2]

I don't think that you need those month and year spans. It is enough to float their container. There is also clearfix missing. Here is the jsfiddle updated http://jsfiddle.net/krasimir/2gwwB/3/ That's the simplest markup and css which I can come up with.

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

The 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;
}

Solution 3:[3]

Here is another minimalist example, display:inline-block is the key.

HTML:

<div class="date"> 
    <span class="day">28</span>
    <span class="month-year">APR<br />2022</span>
</div>

CSS:

.month-year {
    display: inline-block;
    font-size: 1.5em;   
}
.day {
    font-size: 4em;   
}

See: http://jsfiddle.net/unb76dw9/13/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ilya Streltsyn
Solution 2 Krasimir
Solution 3 Slion

Related Questions