4

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

请参阅我创建的小提琴：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;
    }

任何想法？

4

2 回答 2

3

你的 CSS 基本上可以工作。如果增加 line-height 会更明显：

请参阅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 属性来对齐文本段的基线。

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

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

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

于 2013-09-04T14:40:25.233 回答
0

实现此目的的另一种简单方法是使用负边距。

span{margin:-4px 10px 0 0} // Uses order of top, right, bottom, left
于 2013-09-04T14:38:03.690 回答