代码之家 › 专栏 › 技术社区 › 9b5b

将可变宽度的DIV放置在其中点

css

9b5b · 技术社区 · 6 年前

给定一个水平偏移量(z),我想水平移动可变宽度的DIV,使其位于偏移量的中点,而不是最左边或最右边。

因为它的宽度是可变的,所以我不能简单地使用固定宽度值的一半来计算偏移量,以得到DIV的中点(z)。

另外,DIV是绝对定位的,因此默认情况下不采用全宽。

这里有一个错误的例子:

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

.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%;
}

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

我不想简单地把分区居中 value 在…的中心 bar .

我要的是 价值 分区 20% 从…开始 酒吧 但我不知道 价值 DIV是。

上面的代码将 价值 成为 20% 从…开始 酒吧 而不是 价值 成为 20% 从…开始 酒吧

2 回复 | 直到 6 年前

VXp Kadir BuÅ¡atliÄ 6 年前

只需添加 transform: translateX(-50%) 哪个会移动它左边它的一半宽度 :

.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;
}

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

GolezTrol 6 年前

可以使用绝对定位和转换元素,也可以在父元素上使用flex。

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

或

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

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前