Question

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

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

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

如何运作......

CSS引擎使用vertical-align属性来对齐文本段的基线。

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

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

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

Answer 2

实现这一目标的另一个简单方法是使用负边距。

span{margin:-4px 10px 0 0} // Uses order of top, right, bottom, left

中心跨度/文本在h1内垂直

2 个答案:

如何运作......