我正在尝试使用CSS设置一些按钮的样式,而我的按钮容器是一个内联块,文本使用line-height在块内垂直居中。问题是当我使用另一个内联块向按钮添加图标时,它似乎调整了前面文本的垂直对齐,尽管图标在中间正确对齐。
<style>
.button {
background: #ccc;
display: inline-block;
padding: 6px 6px 5px 6px;
line-height: 16px;
height: 16px;
position: relative;
vertical-align: text-bottom;
}
.button .icon {
background-image: url("../images/button-down.png");
display: inline-block;
height: 16px;
width: 16px;
margin: 0;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
position: relative;
}
</style>
<!-- with icon -->
<a href="#" class="button">Save <span class="icon"></span></a>
<!-- without icon -->
<a href="#" class="button">Save</a>
当图标出现时,文本向下移动。我可以帮助理解为什么图标块会影响前一个文本的位置。
答案 0 :(得分:6)
添加
vertical-align: middle;
到.icon
课程。小提琴:http://jsfiddle.net/JGJtH/。
(如https://developer.mozilla.org/en/CSS/vertical-align中所述,该属性的默认值为基线)