Question

给定一个水平偏移（z），我想通过它的中点将变宽度div水平移动到该偏移，而不是它的最左边或最右边。

由于它的可变宽度，我不能简单地使用固定宽度值的一半来计算偏移量，以使div的中点达到（z）

另外，div是绝对定位的，因此默认情况下不占用整个宽度

这里有一个不正确的例子：

http://jsbin.com/rejaduxepe/edit?html,css,output

＆＃13;

.bar {
  width: 80%;
  position: absolute;
  top: 0;
  height: 25px;
  border-radius: 2px;
  border: solid 1px #F09;
}

.value {
  position: absolute;
  height: 19px;
  line-height: 18px;
  border-radius: 2px;
  top: 2px;
  background-color: #0F9;
  border: solid 1px #F90;
  color: #000;
  left: 20%;
}

＆＃13;

<div class="bar">
  <div class="value">123v452</div>
</div>

＆＃13;

我并不只是想将div value置于bar的中心。

我想要＆＃34; midpoint＆＃34;从value开始，20% div为bar，但我不知道value div有多宽。

上面的代码将＆＃34;最左边的＃34;从value开头20%的{{1}}部分，而不是＆＃34;中点＆＃34;从bar

开始，value为20%

Answer 1

您可以使用绝对定位并使用元素转换元素，也可以在父元素上使用flex。

div{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

或

.divWrapper{
  display: flex;
  justify-content: center;
}

Answer 2

只需添加transform: translateX(-50%)即可将左移动宽度的一半：

＆＃13;

.bar {
  width: 80%;
  position: absolute;
  top: 0;
  height: 25px;
  border-radius: 2px;
  border: solid 1px #F09;
}

.value {
  position: absolute;
  height: 19px;
  line-height: 18px;
  border-radius: 2px;
  top: 2px;
  transform: translateX(-50%);
  background-color: #0F9;
  border: solid 1px #F90;
  color: #000;
  left: 20%;
}

span {
  position: absolute;
  top: 30px;
  width: 20%;
  border-top: 2px solid red;
}

＆＃13;

<div class="bar">
  <div class="value">123v452</div>
  <span></span>
</div>

＆＃13;

通过它的中点定位可变宽度div

2 个答案: