内联块内的 CSS 垂直对齐

发布于 2024-12-28 13:28:41 字数 855 浏览 1 评论 0原文

我正在尝试使用 CSS 设置一些按钮的样式，而我的按钮容器是一个内联块，其中文本使用行高在块内垂直居中。问题是，当我使用另一个内联块向按钮添加图标时，尽管图标在中间正确对齐，但它似乎调整了前面文本的垂直对齐方式。

<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>

当图标出现时，文本会向下移动。我需要一些帮助来理解为什么图标块会影响前面文本的位置。

原文

I'm trying to style some buttons with CSS and my button container is an inline-block with the text vertically centred within the block using line-height. The problem is when I add an icon to the button using another inline-block it seems to adjust the vertical alignment of the preceding text although the icon is correctly aligned in the middle.

<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>

When the icon is present the text is shifted down. I could do with some help understanding why the icon block effects the position of the preceding text.

分享到QQ

分享到微博