How can I set a left align for the last element which is into a center container?

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?

Related - https://stackoverflow.com/questions/32802202/how-to-center-a-flex-container-but-left-align-flex-items — Paulie_D, Jul 11 '17 at 06:49
and - https://stackoverflow.com/questions/33192745/center-align-container-and-left-align-child-elements?rq=1 — Paulie_D, Jul 11 '17 at 06:50
@Mr.Alien I can change everything .. Both HTML and CSS codes. I just need to keep boxes in the container center, and set the last box in the same line of left column (vertically). — Martin AJ, Jul 11 '17 at 06:51
@MartinAJ say I am resizing the screen and there are two boxes in the second row and three in the first, do you want to bottom two boxes to be centered? — Mr. Alien, Jul 11 '17 at 07:30
@Mr.Alien no, two boxes should be in the left side, exactly in the same line of columns. — Martin AJ, Jul 11 '17 at 07:32
@MartinAJ refer to comment 1 of Paulie, follow the flex box approach — Mr. Alien, Jul 11 '17 at 07:41
@Mr.Alien Apparently I have to `:-(` .. You know, I **hate** `@media`. — Martin AJ, Jul 11 '17 at 07:44
@MartinAJ Yea cuz apparently it seems to be a simplistic approach if used flex box ;) — Mr. Alien, Jul 11 '17 at 07:45

Alexander Higgins · Answer 1 · 2017-07-11T07:04:52.600

2

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>

edited Jul 11 '17 at 07:04

answered Jul 11 '17 at 07:00

Alexander Higgins

6,765
1
23
41

I don't want a fix width *(`px`)* as the container's width. – Martin AJ Jul 11 '17 at 07:03
I changed it to a pct. But that pct needs to be set based on the relative widths of your inner box. – Alexander Higgins Jul 11 '17 at 07:05
If you take a look at boot strap, that is why they have col-md-2 to col-md-12. – Alexander Higgins Jul 11 '17 at 07:06
The containing box now needs `overflow:auto` in order to automatically stretch vertically. – Timothy Groote Jul 11 '17 at 08:54

score 1 · Answer 2 · answered Jul 11 '17 at 06:53

1

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>

answered Jul 11 '17 at 06:53

prasanth

22,145
4
29
53

Seems my question isn't clear enough. Because in your code, all boxes are in the left side of container. while I need to keep in the container center. – Martin AJ Jul 11 '17 at 06:54

Ricky Dam · Answer 3 · 2017-07-11T07:05:13.433

1

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>

edited Jul 11 '17 at 07:05

answered Jul 11 '17 at 06:54

Ricky Dam

1,833
4
23
42

1

Center is not valid html5 – Alexander Higgins Jul 11 '17 at 06:57
I don't want a fix width *(`px`)* as the container's width. – Martin AJ Jul 11 '17 at 07:02
I wasn't able to do it without a set number of px. Sorry. I tried :( – Ricky Dam Jul 11 '17 at 07:29

Jithin Raj P R · Answer 4 · 2017-07-11T09:02:12.963

1

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>

edited Jul 11 '17 at 09:02

answered Jul 11 '17 at 06:56

Jithin Raj P R

6,667
8
38
69

Well you know, I want a fixed width for boxes. – Martin AJ Jul 11 '17 at 07:41
@MartinAJ Do you want it to responsible also? – Jithin Raj P R Jul 11 '17 at 07:42
Yes, that's actually the question `:-)` – Martin AJ Jul 11 '17 at 07:43
@MartinAJ i have changed my code can you please check it – Jithin Raj P R Jul 11 '17 at 07:49
Now boxes aren't center. – Martin AJ Jul 11 '17 at 07:50
@MartinAJ, I have changed my code but it will be not be centred. if you want it to the center we have to put a wrap inside `.container` and then centre the content inside it. – Jithin Raj P R Jul 11 '17 at 09:10

score 1 · Answer 5 · edited Jul 11 '17 at 08:51

1

Use float:left; inside box class, like:

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

edited Jul 11 '17 at 08:51

flob

3,760
2
34
57

answered Jul 11 '17 at 08:39

Prk

36
6

How can I set a left align for the last element which is into a center container?

5 Answers5