我有以下 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”标签居中

但是我有以下限制:
  • 外包装器必须绝对定位
  • 我只能使用 LESS/CSS。
  • 我无法添加或删除任何 HTML。
  • 容器的宽度必须保持动态(“a”标签可以通过 JS 添加或删除)

  • 这可能吗?

    最佳答案

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

    #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

    没有固定 width 的其他选项:

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

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

    来自:https://stackoverflow.com/a/23384995/4339170

    关于css - 绝对定位的 div 中的中心元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34499407/

    10-12 00:06
    查看更多