Question

jsfiddle with example

Click a county name to see it’s crest appear.

I am appending divs as they are needed and the background for each div is from a css sprite which works perfectly. What I would like is to vertical center each added div so they line up more neatly.

I can add position: relative; top: XXpx; and amend the top manually for each each crest e.g..Corksmall { background-position: -25px -27px; height: 27px; width: 25px; position: relative; top: 5px;} but that seems like the brute force method.

Is there a more coder pleasing way of doing this? tia

Answer 1

There’s a simple trick to achieve this behavior.

#selectedCounties .sprite-smallcrests {
    /* float: left; */ /* removed. no need for, because we apply display: inline-block */
    display: inline-block;
    vertical-align: middle;
}

Live demo: http://jsfiddle.net/CGcdc/4/

You may have noticed, that the pictures/divs jump, depending on the height of each picture.
Prepending an empty element with a height of the tallest picture possible, will prevent the jumping:
Live demo: http://jsfiddle.net/CGcdc/9/

If you want to get this crossbrowser compatible, replace the wrapper divs with spans or other elements which are inline-elements by default:

$('#Clare, #Cork, #Limerick').click(function(){
    $('<span/>', {
        title: 'Co. '+this.id,
        'class': this.id+'small sprite-smallcrests'
    }).appendTo('#selectedCounties');
});

Hope this will fix your problem 🙂