使用css sprites定位div：有没有办法自动垂直居中以获得更整洁的结果

Question

jsfiddle with example

单击县名以查看它的顶部。

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

我可以添加position: relative; top: XXpx;并手动修改每个顶部的顶部，例如.Corksmall { background-position: -25px -27px; height: 27px; width: 25px; position: relative; top: 5px;}，但这似乎是强力方法。

有更好的编码方式吗？ TIA

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/

如果您想让这个crossbrowser兼容，请将包装div替换为span s或其他默认为内联元素的元素：

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

希望这能解决您的问题：）

Answer 2

根据我的理解，您希望将smallcrests居中..所以，试试这个..将以下css更改为下面给出的。

#selectedCounties .sprite-smallcrests {
margin: 10px auto;
}

这是DEMO

Answer 3

我要做的是，使用相同的精确高度保存每个图像，并将顶部垂直放置在图像文档中。

在您使用精灵表的情况下，这意味着：只需垂直留出足够的空间，以便为所有图像设置一个静态高度。

解释性图片。

• 绿色区域是波峰的形象。
• 红色边框是整个图像。
• 空格代表您在每个img文档中留下的空白区域（或精灵表中的徽章之间的填充。）