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

Question

I wonder how to align three elements in one div. Basically, it should look like this

Solved.
For future readers, the solution for my problem looks like this

 <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

Try using float:left and float:right for left and right see this fiddle:

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> 

The best thing is if you are adding more data inside container . it will give equal spacing. And inline styling is not a better option

Demo here

Answer 3

Please do follow certain things like not have any styles inline

.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

All 3 spans should have separate stylings. Here:

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

This should do it.

Answer 5

well there are a number of ways to do this. but you could use something like this

 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

Use DIVs instead of spans and this simple CSS for the container element:

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

display: flex does the equal distirbution, justify-content: space-between; makes the outmost elements align at the borders.

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

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