如何为进入中心容器的最后一个元素设置左对齐？

Question

Here is my code:

 .container{ width: 50%; border: 1px solid; text-align: center; } .box{ display: inline-block; border: 1px solid red; width: 100px; height: 20px; margin: 10px; } 

 <div class="container"> <div class="box">sth</div> <div class="box">sth</div> <div class="box">sth</div> <div class="box">sth</div> <div class="box">sth</div> </div> 

As you see, the last element is also center. While I need to keep in the same line (vertically) on left column. So this is the expected result:

How can I do that?

Answer 1

Use float:left on your block.

You need to add nested div and set a width on it.

Then your box elements will all be centered to the nested div and have your last box in the left column.

 .center { text-align: center; margin-left:auto%; margin-right:auto%; width: 100%; } .container{ margin-left:25%; margin-right:25%; width:40%; border: 1px solid; } .box{ display: inline-block; border: 1px solid red; float: left; width: 100px; height: 20px; margin: 10px; } 

 <div class="center"> <div class="container"> <div class="box">sth</div> <div class="box">sth</div> <div class="box">sth</div> <div class="box">sth</div> <div class="box">sth</div> </div> </div> 

Answer 2

Try with floating property .And fix the container with min heigh

 .container{ width: 50%; border: 1px solid; text-align: center; min-height:150px; } .box{ float:left; border: 1px solid red; width: 100px; height: 20px; margin: 10px; } 

 <div class="container"> <div class="box">sth</div> <div class="box">sth</div> <div class="box">sth</div> <div class="box">sth</div> <div class="box">sth</div> </div> 

Answer 3

I added some background colours for you to see what the containers are doing.

 .container{ width: 50%; border: 1px solid; text-align: center; background-color: silver; } .box{ display: inline-block; border: 1px solid red; width: 100px; height: 20px; margin: 10px; text-align: center; } .innerContainer { width: 250px; background-color: lightgray; margin: auto; } .row { text-align: left; } 

 <div class="container" align="center"> <div class="innerContainer"> <div class="box">sth</div> <div class="box">sth</div> <div class="box">sth</div> <div class="box">sth</div> <div class="row"> <div class="box">sth</div> </div> </div> </div> 

Answer 4

Try this I think it will work fine if you want it to be responsive I will help you with mediaQuery .

 .container { width: 50%; border: 1px solid; text-align: center; display: flex; flex-direction: colomn; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: stretch; } .box { display: inline-block; border: 1px solid red; width: 100px; height: 20px; margin: 10px; } 

 <div class="container"> <div class="box">sth</div> <div class="box">sth</div> <div class="box">sth</div> <div class="box">sth</div> <div class="box">sth</div> </div> 

Answer 5

Use float:left; inside box class, like:

.box{
   display: inline-block;
   border: 1px solid red;
   width: 100px;
   height: 20px;
   margin: 10px;
   float: left;
}