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

Answer 2

如果你想让背景位于div的top left，那么你需要将你的内容包装在另一个absolute div中，并将其与箭头图片对齐。这是一些jsFiddle。

<强> HTML

<div class="defArrow" id="def_red_low">
    <div class="arrows-text">YELLOW</div>
</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;
}
.arrows-text{
     position:absolute;
    top:0;
    left:50%;
    margin-left:-100px;
    width:200px;
    text-align:center;

}

虽然，我认为将您的背景位置更改为top center和text-align:center;，您的内容会变得更加智能。

Answer 3

<div class="colors"></div>

<div class="defArrow arrowRed" id="def_red_low">
    RED
</div>
<div class="defArrow arrowYellow" id="def_yellow">
    YELLOW
</div>
<div class="defArrow arrowGreen" id="def_green">
    GREEN
</div>
<div class="defArrow arrowBlue" id="def_blue">
    BLUE
</div>



.colors{
    border:1px solid #CCCCCC;
    height:20px;

}

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

.arrowYellow{
    left: 100px; 
}

.arrowGreen{
    left: 200px;   
}

.arrowRed{
    left: 300px;   
}

.arrowBlue{
    left: 400px;   
}

您可以尝试this！

感谢Kamuran的箭头链接：）。

Answer 4

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

您需要从css代码中删除宽度。因为根据您的代码，您的文字应该位于中心位置，但是当您使用width:20px时，这种情况非常少，这就是为什么它似乎是左对齐的原因。

尝试从css中删除宽度，它可以正常工作。

在背景下对齐文本

4 个答案: