HTML / CSS在div中对齐多个元素

Question

我想知道如何在一个div中对齐三个元素。基本上，它应该是这样的

解决。
对于未来的读者，我的问题的解决方案看起来像这样

＆＃13;

＆＃13;

<div style="text-align: center;">
  <span style="float: left;">LEFT</span>
  <span style="margin: auto;">CENTER</span>
  <span style="float: right;">RIGHT</span>  
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试左右使用 float:left 和 float:right 看看这个小提琴：

https://jsfiddle.net/u924gptz/

Answer 2

＆＃13;

＆＃13;

.container{
  display: flex; // working with all latest browsers
  display: -webkit-flex;  // for old version of safari
  display: -ms-flex; // for old versions of IE
  justify-content: space-between;
}
.container span{
  flex: 1;
  text-align: center;
}

＆＃13;

<div class="container">
  <span>LEFT</span>
  <span>CENTER</span>
  <span>RIGHT</span>  
</div>

＆＃13;

＆＃13;

＆＃13;

最好的办法是在container内添加更多数据。它会给出相等的间距。内联样式不是更好的选择

Demo此处

Answer 3

请遵循某些内容，例如没有任何内联样式

.wrapper {
    text-align: center;
}
.left {
    float:left;
}
.center {
    margin: auto;
}
.right {
    float: right;
}


<div class="wrapper">
  <span class="left">LEFT</span>
  <span class="center">CENTER</span>
  <span class="right">RIGHT</span>  
</div>

Answer 4

所有3个跨度都应该有单独的样式。 这里：

<div style="text-align: center;">
  <span style="float: left;">LEFT</span>
  <span style="margin: auto;">CENTER</span>
  <span style="float: right;">RIGHT</span>  
</div>

这应该这样做。

Answer 5

有很多方法可以做到这一点。但你可以使用这样的东西

div { display:flex; align-items: center;}
span:first-child {float:left;}
span:nth-child(2) {margin:0 auto}
span:last-child {float:right}

<div>
      <span>LEFT</span>
      <span>CENTER</span>
      <span>RIGHT</span>  
    </div>

Answer 6

使用DIV而不是跨度和容器元素的简单CSS：

.x { 
      display: flex; 
      justify-content: space-between;
    }

display: flex执行相同的分配，justify-content: space-between;使最外面的元素在边界处对齐。

.x { 
  display: flex; 
  justify-content: space-between;
}

<div class="x">
  <div>LEFT</div>
  <div>CENTER</div>
  <div>RIGHT</div>  
</div>