Question

我有一个a元素，它有一个css规则：display: inline-block;（这个css规则不应该更改），在这个a元素中我有一个我想要的范围垂直居中，我希望span元素的高度等于它的高度。

<a class="anchor" href="#">
  Fonctionnalite 2
  <span class="label">Lecture</span>
</a>

这就是我的尝试：

.anchor {
    background: #38bcfc;
    border-radius: 2px;
    box-shadow: inset 0 0 1px #999999;
    line-height: 40px;
    height: 40px;
    display: inline-block;
    color: black;
    white-space: nowrap;
    padding: 0 4px 0 1px;
    margin: 0;
    vertical-align: top;
    color: #FFF;
}
.label{
      float: right;
    margin-left: 30px;
    color: white;
    border-radius: 0;
    text-shadow: none;
    font-size: 11px;
    font-weight: normal;
    padding: 0 3px 0 3px;
    background-color: #abbac3!important;
    display: inline-block;
}

这是jsfiddle的演示：

https://jsfiddle.net/d3zyfv86/1/

我该如何解决这个问题？

Answer 1

如果您希望标签具有其内容的高度，则必须设置其line-height，因为它目前从锚点继承。

此外，您需要为文本创建一个容器以垂直放置它。因此，我现在将您的标签用作容器，并使用另一个范围label-text。

修复可能是：https://jsfiddle.net/d3zyfv86/3/

Answer 2

这个问题没有多大意义

但如果您将跨度的高度更新为1.5em，那么您可以通过删除float: right并添加vertical-align: center https://jsfiddle.net/d3zyfv86/2/

来将其居中

在内联块元素内垂直居中

2 个答案: