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

Question

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

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

 <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 1

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

https://jsfiddle.net/u924gptz/

Answer 2

 .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; } 

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

最好的事情是，如果要在container中添加更多数据。 它将给出相等的间距。 内联样式不是更好的选择

在这里演示

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代替spans和以下简单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>