css - 绝对定位的 div 中的居中元素

Question

我有以下 HTML:

<div id="hasToBeAbsolute">
  <a></a>
  <a></a>
  <a></a>
</div>

样式如下:

#hasToBeAbsolute {
  position: absolute;
  display: table;
  margin: 10px auto 0;
}

#hasToBeAbsolute a {
    background: rgba(200, 200, 200, 0.8);
    margin-left: 10px;
    width: 12px;
    display: block;
    float: left;
    height: 12px;
    font-size: 0;
    border-radius: 50%;
}

codepen

我想在 div like this 中居中放置 3 个“a”标签

但是我有以下限制:

1. 外包装必须绝对定位
2. 我只能使用 LESS/CSS。
3. 我无法添加或删除任何 HTML。
4. 容器的宽度必须保持动态(可以通过 JS 添加或删除“a”标签)

这可能吗？

Answer 1

将此添加到您的代码中，它将起作用:

#hasToBeAbsolute {
...
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
}

(也可以选择更小的宽度)

演示:http://codepen.io/anon/pen/jWVbQy

发件人:https://stackoverflow.com/a/8273750/4339170

---

没有固定宽度的其他选项:

#hasToBeAbsolute {
...
  left: 50%;
  transform: translate(-50%, 0);
}

http://codepen.io/anon/pen/XXNmOE

发件人:https://stackoverflow.com/a/23384995/4339170