html - 在背景下对齐文本

Question

我遇到了 CSS 方面的问题。我需要我的文本在箭头(背景图像)下对齐。 但背景图片必须位于 div 的左上角。

我的意思是:

文本现在就在箭头下方，但我希望它在箭头下方居中对齐。我该怎么做？

HTML

<div class="defArrow" id="def_red_low">
    RED
</div>
<div class="defArrow" id="def_yellow">
    YELLOW
</div>
<div class="defArrow" id="def_green">
    GREEN
</div>
<div class="defArrow" id="def_blue">
    BLUE
</div>
<div class="defArrow" id="def_red_high">
    RED
</div>

CSS

.defArrow {
    position: absolute;
    top: 107px;
    left: 42px;
    float: left;
    background: url('../images/up_arrow.png') no-repeat top center;
    display: block;
    width: 20px;
    height: 20px;
    line-height: 60px;
    font-size: 12px;
}

如有任何帮助，我们将不胜感激。

Answer 1

您可以提高 div 的宽度并设置文本居中对齐。你的 div 已经是绝对的了。所以你可以使用 div 的中心作为相对零。对于我的 css，它是 51px

.defArrow {
    position: absolute;
    top: 107px;
    left: 42px;
    float: left;
    background: url('https://upload.wikimedia.org/wikipedia/en/7/72/Dark_Green_Arrow_Up.png') no-repeat top center;
    display: block;
    background-size:20px 20px;
    background-position:center top;
    width: 101px;
    height: 20px;
    line-height: 60px;
    font-size: 12px;
    text-align:center
}

jsfiddle