Centering a div element within another div element

Question

I tried centering a div within another div. I saw Manoj Kumar's response to this question. But it's not working.

<div class="row">
  <div class="col-sm-9">
    <div class="contAin">
        <div class="tile">Some Content</div>
    </div>
</div>
</div>

and the css

.tile {
  margin-bottom: 30px;  
  width: 80%;
}

.contAin {
  display: flex;
  justify-content: center;
}

The inner div is just aligning itself to the left.

Try margin:auto; or text-align:center; in main div – Rahul Saxena Dec 09 '15 at 11:42 — Rahul Saxena, Dec 09 '15 at 11:42
@PraveenKumar yea, I did, it worked. – Rockstar5645 Dec 09 '15 at 11:47 — Rockstar5645, Dec 09 '15 at 11:47
@PraveenKumar absolutely – Rockstar5645 Dec 09 '15 at 11:50 — Rockstar5645, Dec 09 '15 at 11:50
http://stackoverflow.com/a/33049198/3597276 – Michael Benjamin Dec 09 '15 at 13:38 — Michael Benjamin, Dec 09 '15 at 13:38

score 3 · Accepted Answer · answered Dec 09 '15 at 11:42

3

Remove the display: flex and instead use this CSS rule for .tile:

.tile {
  width: 80%;
  margin: 0 auto 30px;
}

Snippet

.tile {
  margin: 0 auto 30px;  
  width: 80%;
}

<div class="contAin">
    <div class="tile">Some Content</div>
</div>

answered Dec 09 '15 at 11:42

Praveen Kumar Purushothaman

164,888
24
203
252

score 0 · Answer 2 · edited Jan 27 '17 at 08:24

0

You can add the margin-left:auto and margin-right:auto to the same css class and check.

So, the CSS becomes:

.tile {
  margin-bottom: 30px;  
  width: 80%;
  margin-left:auto;
  margin-right:auto;
}

edited Jan 27 '17 at 08:24

Sravan

18,467
3
30
54

answered Dec 09 '15 at 11:42

code.rider

1,891
18
21

score 0 · Answer 3 · answered Dec 09 '15 at 11:43

0

I tried it in jsfiddle, and that's working http://jsfiddle.net/say2vnxb/

.tile {
  margin-bottom: 30px;  
  width: 80%;
  background: yellow;
}

.contAin {
  display: flex;
  justify-content: center;
  border: 1px solid red;
}

What browser do you use?

answered Dec 09 '15 at 11:43

Lenar Fattahov

141
8

chrome..and I know it's updated, I'm using bootstrap, do you think that might have something to do with it? – Rockstar5645 Dec 09 '15 at 11:44
Yes, did you watch it in chrome inspector? Do you have link to website? – Lenar Fattahov Dec 09 '15 at 11:48
I used bootstrap, and everything is wrapped in a bootstrap column, did that affect it? – Rockstar5645 Dec 09 '15 at 11:51
Yeah, it could rewrite some default css styles – Lenar Fattahov Dec 09 '15 at 13:12

Prajwal Shrestha · Answer 4 · 2015-12-10T02:55:40.050

0

try this in CSS code:

.tile  {margin-right: auto;margin-left: auto;}

edited Dec 10 '15 at 02:55

answered Dec 09 '15 at 11:44

Prajwal Shrestha

524
3
12

This will not work! You cannot use `text-align: center;` for block level element. Would you like to update your answer? – Praveen Kumar Purushothaman Dec 09 '15 at 11:52

Centering a div element within another div element

4 Answers4