Question

我有一组div作为标记。在标记的脚下，我有数字。我想将这些数字居中，但到目前为止的挑战是在宽度约为4px的div中进行。

我设法通过明确为span标记提供设置宽度，将其定位left: 50%，使其为margin-left: -20px（宽度的一半），最后为text-align: center来实现此目的。虽然它有效但似乎有点 hacky ，因为如果数字在跨度之外突破，水平对齐不起作用。

＆＃13;

.parent {
    background: black;
    display: inline-block;
    margin: 0 30px;
    position: relative;
    height: 20px;
    width: 4px;
}

.child {
    text-align: center;
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -20px;
    width: 40px;
}

＆＃13;

<div class="parent">
    <span class="child">1</span>
</div>

<div class="parent">
    <span class="child">10</span>
</div>

<div class="parent">
    <span class="child">100</span>
</div>

<div class="parent">
    <span class="child">10000000</span>
</div>

＆＃13;

Answer 1

在孩子身上使用CSS3 transform将其恢复50％的宽度。

.child {
    text-align: center;
    position: absolute;
    top: 100%;
    left: 50%;
    transform:translateX(-50%);

}

＆＃13;

.parent {
  background: black;
  display: inline-block;
  margin: 0 30px;
  position: relative;
  height: 20px;
  width: 4px;
}
.child {
  text-align: center;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

＆＃13;

<div class="parent">
  <span class="child">1</span>
</div>

<div class="parent">
  <span class="child">10</span>
</div>

<div class="parent">
  <span class="child">100</span>
</div>

<div class="parent">
  <span class="child">10000000</span>
</div>

＆＃13;

支持是IE9及以上 - CanIUse.com

Answer 2

您可以将您的子代码设为：

.child {
    text-align: center;
    position: absolute;
    bottom: -20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

这将使您的号码居中。问题是它只适用于现代浏览器。

JSFIDDLE

在具有约束宽度的父级内部没有设置宽度的子元素水平居中

2 个答案: