Align elements vertically with CSS

Question

I have an element that is 60 pixels high, which has other elements, such as an image, and several spans inside it, and I am having problems aligning them vertically inside an element with a height of 60 pixels. Here's the layout and CSS:

<div class="member"> <img src="images/pic.png" alt="John Smiths 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 put it on jsfiddle: http://jsfiddle.net/CYFyx/2/

As you can see, the elements in the .member element push up. I need them to be vertically aligned like this:

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

Answer 1

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

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

with these properties

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

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

Answer 2

Try putting them all in a div, which you can vertically align with

 position:relative; margin-top: auto; margin-bottom: auto; height: XXpx; 

Answer 3

You need to set the width of the parent element and the width of your children so that they move to the next line.

Another possibility would be to set the parent element position:relative , and then use position:absolute for all children and simply, precisely place them using top:20px; , then the following top:40px; etc. etc.

With this second solution, you can get the exact pixel positioning of all children.

This will positively give you the best results.

Answer 4

You can also put them in a div and add padding to the top.

HTML

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

CSS

 #block { padding-top:5px; } 

jsFiddle