我有这个 html 代码:
<ul id="top-bar">
<li class="top-icon-block"><img src="images/home.png"></li>
<li class="top-icon-sep-block"><img src="images/top_icon_separator.png"></li>
<li class="top-icon-block"><img src="images/home.png"></li>
</ul>
相关的 CSS 如下所示:
#top-bar {
width: inherit;
height: 40px;
padding: 0px;
margin: 0px;
vertical-align: middle;
display: table-row;
}
.top-icon-block {
width: 50px;
margin: 0px;
background-image: url("images/top_bar_bg.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
li.top-icon-block img {
padding-top: 8px;
vertical-align: middle;
}
.top-icon-sep-block {
width: 4px;
margin: 0px;
background-image: url("images/top_bar_bg.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
li.top-icon-sep-block img {
padding-top: 18px;
vertical-align: middle;
}
出于某种原因,所有图像都基于最高填充顶部对齐,而我真的需要它们不同。
这是一个jsfiddle:http: //jsfiddle.net/XWdMP/