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>