我有一个精灵,由4个气泡组成,我将用于导航的选定版本,如下所示:
我能找到的最好的例子是Dribbble。查看标题导航选择的导航。他们使用类似于我的气泡覆盖“乔布斯”链接,除了他们使用纯css来实现外观,而我正在使用图像。
这是我的代码:
.inline-block{
/* Inline block class for li navigation */
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
#header li a{
width:40px; /* without padding = 110px*/
height:15px; /* without padding = 31px*/
padding:8px 35px;
}
#header li a.selected{
background: url('../img/btn-header-sprite.png') 0 -1px;
display:inline-block;
}
#header li a{
color:#FFF;
font-weight:bold;
font-size:15px;
}
#header li:hover{
background-position:0 -34px;
}
#header li:active{
background-position:0 -67px;
}
现在它看起来像这样:
我必须单独对齐每个填充,如您所见,如果填充不正确,文本不会在气泡中居中。是否有更好的格式化方法,而不是单独为每个气泡提供填充?
感谢您的帮助!如果您需要更多说明,请说出来!
答案 0 :(得分:0)
你可以尝试
display:table-cell;
vertical-align: middle;