vertical align <span> element

css, html

Solution

If you want a solution that doesn't include `line-height`, and `float`, also you want to align the `span` to the right ....

Then use `display: table;` for the parent element having nested child elements set to `display: table-cell;`

Demo

.main{
    background-color: #666666;
    border: 1px solid red;
    display: table;
    width: 100%;
}
h1{
    background-color: #383838;
    display: table-cell;
    margin: 0;
    padding: 0;
    width: 20%;
}
.main span{
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

Problem

html ``` <div class="main"> <h1>Test</h1> <span class="details">Jan 21, 2014</span> </div> ``` css ``` .main{ background-color: #666666; border: 1px solid red; } h1{ background-color: #383838; display: inline-block; margin: 0; padding: 0; } .main span{ display: inline-block; vertical-align: middle; } ``` jsFiddle This seems to be really a simple problem, but I'm not able to fix it or I'm being too lazy. Just would like to `vertical-align: middle` and align it to the right of the div, if I use `float: right` the element attaches to the bottom of the border above. Don't want to use `line-height` as well.

Original source