Test

Jan 21, 2014CSS .main{ back...">
Geek asks and answers

Vertical Alignment Element <span>

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 like a really simple problem, but I can't fix it, or I'm too lazy. Just wanted to vertical-align: middlealign it to the right of the div, if I use float: right, the element is attached to the bottom of the border above. Do not want to use line-height.

+3
source share
2 answers

If you need a solution that does not include and , you also want to align right .... line-heightfloatspan

Then use display: table;for the parent with nested children set todisplay: 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;
}
+6
source

You want to add vertical-align: middle;to yourh1

Fiddle

+5
source

More articles:


All Articles