呈现内联块（没有文本内容）元素与文本内联

Question

我有内联块元素。这些是字形，可以包含SVG内容，但不包含文本。

问题在于这些元素不与文字对齐：

＆＃13;

＆＃13;

.example {
    line-height: 32px;
    margin: 12px 0;
}

.wrapper {
    display: inline-block;
    height: 24px;
    width: 24px;
    position: relative;
    background-color: red;
}

.wrapper > .content {
    position: absolute;
    bottom: 3px;
    right: 3px;
    height: 12px;
    width: 12px;
    background-color: blue;
}

＆＃13;

<div class=example>
    <div class=wrapper>
        <div class=content>

        </div>
    </div>
    not aligned with text
    <div class=wrapper>
        <div class=content>

        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我可以轻松地降低单个元素，但它很麻烦，需要大量的微调。

我不能依赖线高和图标大小相同，内部的SVG重叠，需要绝对定位。

有没有办法让这些文字始终与文字垂直居中？

Answer 1

指定vertical-align:bottom到包装类：

＆＃13;

＆＃13;

.example {
    line-height: 24px;
    margin: 12px 0;
}

.wrapper {
    display: inline-block;
    height: 24px;
    width: 24px;
    position: relative;
    background-color: red;
    vertical-align:bottom;
}

.wrapper > .content {
    position: absolute;
    bottom: 3px;
    right: 3px;
    height: 12px;
    width: 12px;
    background-color: blue;
}

＆＃13;

<div class=example>
    <div class=wrapper>
        <div class=content>

        </div>
    </div>
    aligned with text
    <div class=wrapper>
        <div class=content>

        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;