html - 以左对齐的可变宽度div居中: x %

  显示原文与译文双语对照的内容
127 2

如何使可变宽度div居中,同时沿规则定位百分比?

在第一个图像 below 中,105.4left: 12% 。 问题是,12%应用于它最左边的边缘,而不是中间的边缘。

如何定位它,比如 12%,但是它的中心位于 12%,而不是它的边缘,像第二个图像 below?

有关代码,请参见 this JSFiddle 。 不能使用 Javascript,也无法修复 105.4 div的宽度。

时间: 原作者:

91 1

在具有 width: 24%;text-align: center; 集的新 div.c 中包装 div.y24%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>

原作者:
126 2

我认为这是最简单的解决方案。 只需要指定一个宽度。 ( 无需触摸 margin,或者左值)

查看这里的收费演示

这是的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;
}

145 0

当你执行 12%绘制红线时。 它将在 12 %. 处结束 所以当你增加一半的时候,是 6% 。 我相信它会工作的。


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

更新

演示

原作者:
...