gpt4 book ai didi

html - 内联 block 内的 CSS 垂直对齐

转载 作者:搜寻专家 更新时间:2023-10-31 22:49:29 26 4
gpt4 key购买 nike

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

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

当图标出现时,文本向下移动。我可以帮助理解为什么图标 block 会影响前面文本的位置。

最佳答案

只需添加

  vertical-align: middle;

.icon 类。 fiddle :http://jsfiddle.net/JGJtH/ .
(如https://developer.mozilla.org/en/CSS/vertical-align中所述,此属性的默认值为基线)

关于html - 内联 block 内的 CSS 垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8968852/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com