使用左边定位的可变宽度div居中：x％

Question

如何将可变宽度div居中，同时沿规则定位百分比？

在下面的第一张图片中，105.4有left: 12%。问题是12％适用于它的最左边，而不是中间。

我如何定位它，比如12％，但是它的中心位于12％，而不是它的边缘，就像下面的第二张图片一样？

有关代码，请参阅this JSFiddle。我无法使用Javascript，我无法修复105.4 div的宽度。

Answer 1

在div.y和div.c设置的新width: 24%;中换行text-align: center;。 24%为12% * 2

jsFiddle

<强> HTML

<div class="x">
    <div class="c" style="width:24%;text-align:center;">
        <div class="y">105.4</div>
    </div>
    <div class="a">
        <div class="b" style="width:12%;margin-right:auto;"></div>
    </div>
</div>

Answer 2

我认为这是最简单的解决方案。 您只需指定一个宽度。 （无需触摸边距或左值）

查看此Demo [展示多个宽度]

这是 HTML （添加另一个包装器，并移动了您的y）

<div class="x">
    <div class="a">
        <div class="b" style="width:12%;">
            <div class="c"><div class="y">105.4</div></div>
        </div>
    </div>
</div>

CSS：（大部分是从你那里复制的）

.x {
    width: 300px;
    font-size: 16px;
    line-height: 20px;
}
.y {
    display: inline-block;
    background-color: #eee;
    padding: 0 3px;
}
.a {
    height: 5px;
    background-color: #007d61;
}
.b
{
    height: 100%;
    background-color: #f00000;
    position:relative;
}
.c
{
    position: absolute;
    width: 200%;
    text-align: center;
    bottom: 100%;
}
body {
    padding: 50px;
}

Answer 3

当你做12％绘制红线时。它将以12％结束。所以当你加一半的时候是6％。我相信它会奏效。

<div class="y" style="left:6%;">105.4</div>

<强>更新

Demo Fiddle