0

jsfiddle 与示例

单击县名以查看其徽章出现。

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

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

有没有更令人愉悦的编码方式来做到这一点？蒂亚

4

3 回答 3

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/

如果您想获得此跨浏览器兼容，请将包装器divs替换为spans 或其他默认为内联元素的元素：

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

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

于 2012-06-19T19:03:45.840 回答
0

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

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

这是一个演示

于 2012-06-18T11:33:10.163 回答
0

我要做的是将每个图像保存为相同的确切高度并将波峰垂直放置在图像文档中。

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

说明图。

在此处输入图像描述

  • 绿色区域是波峰的图像。
  • 红色边框是整个图像。
  • 空白表示您将在每个 img 文档中留下的空白空间（或您的 sprite 表中的波峰之间的填充。）
于 2012-06-18T12:19:20.263 回答