jquery - 使用 css sprites 定位 div : is there a way to auto vertical-center for a neater result

Question

jsfiddle with example

点击一个县名可以看到它的徽章出现。

我在需要时附加 div，每个 div 的背景都来自完美运行的 css sprite。我想要的是将每个添加的 div 垂直居中，以便它们排列得更整齐。

我可以添加position: relative; top: XXpx; 并为每个波峰手动修改顶部，例如 .Corksmall { background-position: -25px -27px;高度:27px；宽度:25px；position:relative； top: 5px; 但这似乎是蛮力方法。

是否有更适合程序员的方式来做到这一点？蒂亚

Answer 1

有一个简单的技巧可以实现这种行为。

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

现场演示:http://jsfiddle.net/CGcdc/4/

您可能已经注意到，图片/div 的跳动取决于每张图片的高度。
在空元素前面加上可能最高图片的高度，将防止跳跃:
现场演示:http://jsfiddle.net/CGcdc/9/

如果你想让这个跨浏览器兼容，将包装器 div 替换为 span 或其他默认为内联元素的元素:

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

希望这能解决您的问题:)