css - 在 h1 内垂直居中跨度/文本

Question

我想将 span 元素置于 h1 标签的中心。我试图设置一个行高，但它似乎只使跨度居中，而不是旁边的文本。注意:我可能不能使用绝对位置，因为“图标”并不总是显示，它可以有不同的宽度。

查看我创建的 fiddle :http://jsfiddle.net/JJhCY/1/

html:

<h1>
    <span class="icon">Icon</span>
    Some Text related to the icon 
</h1>  

CSS:

  .icon 
    {
    background: aqua;
    border: 1px solid blue;
    font-size: 80%;
    border-radius: 3px;
    width: 40px;
    line-height: 13px;
    padding: 2px;
    display: inline-block;
    text-align: center;
    }


    h1
    {
    background: red;
    font-size: 11px;
    line-height: 18px;
    }

有什么想法吗？

Answer 1

您的 CSS 基本上可以正常工作。如果增加行高会更明显:

在 http://jsfiddle.net/audetwebdesign/PUeaY/ 查看演示

h1 {
    background: red;
    font-size: 40px;
    line-height: 80px;
}
.icon {
    background: aqua;
    border: 1px solid blue;
    border-radius: 3px;
    padding: 0px 4px;
    width: auto;
    display: inline-block;
    font-size: 20px;
    line-height: 40px;
    vertical-align: 7px;
}

在这个例子中，span 和文本都在中心垂直对齐，我认为这是你想要的。

这是如何工作的...

CSS 引擎使用垂直对齐属性来对齐文本段的基线。

在这种情况下，我将 h1 的默认字体大小和行高分别设置为 40px 和 80px。

对于 .icon，我将字体大小和行高减少了 50%。如果 vertical-align 设置为 baseline 或 0，较小和较大的文本都会沿字母底部对齐，但它看起来不会居中，因为图标文本的字体较小。

通过将 vertical-align 调整为 7px，我得到了一个看起来不错的居中。这不是一个精确的过程，但它可能工作得很好。