如何在HTML中对齐内容

Question

我在html中设计了一个页面，如下所示。我想将数字（121,123）与中心对齐，并将箭头对准数字。

但在我的代码设计中，箭头会使这些数字向右推进。

我该如何正确看待这些？

我的代码是

<div class="thumbnail clearfix">
    <div class="caption">
        <h5>   
            <a>Unknown</a>
        </h5>
        <img src="images/image.png">
        <small><b>121</b></small>
        <br><small><b>0:0:4</b><br><b>10:20PM Mon, Nov.18</b>
        </small><br><a href="#" id="recentContactCall" phno="121" class="btn btn-primary">Poke</a>
    </div>
</div>

Answer 1

将箭头放在数字的容器上：

<span class="value">123</span>

然后添加类似的内容：

.value {
    position: relative;
}

.value:before {
    content: "";
    display: block;
    width: 25px; // arrow width
    height: 25px; // arrow height
    background: url('arrow.gif');
    position: absolute;
    top: 0; left: -50px;
}

如果您需要支持在浏览器中伪元素之前向后扩展，则需要实际嵌套图像：

<span class="value">
    <img src="arrow.gif" />123
</span>

然后像我们之前做的那样定位它：

.value {
    position: relative;
}

.value img {
    position: absolute;
    top: 0; left: -50px;
}