0

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

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

我怎样才能定位它，比如 12%，但它的中心在 12%，而不是它的边缘，如下图第二张所示？

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

4

3 回答 3

1

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

看看这个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;
}
于 2013-10-09T07:10:49.487 回答
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>
于 2013-10-09T06:33:01.280 回答
-1

当你做 12% 时画红线。它将以 12% 结束。因此，当您添加一半时，即 6%。我相信它会起作用。

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

更新

演示小提琴

于 2013-10-09T06:33:47.717 回答