Question

I have an element that’s 60px tall that has other elements like an image and a couple of spans inside of it and I’m having trouble getting them to align vertically inside the 60px high element. Here’s the mockup and CSS:

<div class="member">
    <img src="images/pic.png" alt="John Smiths's Profile Picture" class="pic">
    <span class="name"><a href="">John Smith</a></span>
    <span class="skills">PHP, MySQL, Javascript, C#, Java</span>
</div>

#sidebar .member {
    height: 60px;
    margin-bottom: 10px;
    vertical-align: center;
}

#sidebar .member .name {
    font-size: 15px;
    font-weight: bold;
}

#sidebar .member .pic {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
}

#sidebar .member .skills {
    display: block;
    font-size: 12px;
    overflow: hidden;
}

I’ve put it up on jsfiddle: http://jsfiddle.net/CYFyx/2/

As you can see, the elements within the .member element push to the top. I need them vertically aligned like so:

Already tried vertical-align: middle; but with no luck.

Answer 1

You can use vertical-align: middle in td table layout only. So you have to add a div around the spans

<div class="cell">
    <span class="name"><a href="">John Smith</a></span>
    <span class="skills">PHP, MySQL, Javascript, C#, Java</span>
</div>   

with this properties

#sidebar .member .cell {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
}

You can test it here: http://jsfiddle.net/Tn2RU/