Question

有没有办法在同一行上左对齐，居中对齐和右对齐元素，而不将元素分隔成单独的容器。为了对齐元素，我知道我可以直接在元素上使用pull-right来浮动元素;但是我无法集中一个元素。我使用bootstrap，但纯css解决方案也没问题。

换句话说，我知道这有效：https://jsfiddle.net/u69rz06s/3/

<div class="row">
  <div class="col-xs-4">
    <button>Button 1</button>
  </div>
  <div class="col-xs-4 text-center">
    <button>Button 2</button>
  </div>
  <div class="col-xs-4 text-right">
    <button>Button 3</button>
  </div>
</div>

但我正在寻找一个类似于此的解决方案（但是，目前这不起作用）：https://jsfiddle.net/pvw1qL5v/2/

<div class="col-xs-12">
  <button>Button 1</button>
  <button style="text-align: center;">Button 2</button>
  <button class="pull-right">Button 3</button>
</div>

Answer 1

使用display: flex和justify-content: space-between。

.col-xs-12 {
  display: flex;
  justify-content: space-between;
}

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <button>Button 1</button>
      <button>Button 2</button>
      <button>Button 3</button>
    </div>
  </div>
</div>

JSfiddle

中心对齐元素位于同一行和同一容器中

1 个答案: