Do I need to use another property other than "text-align" to center my DIV within a DIV?

Question

I want to center a DIV within a parent DIV. I have tried using the recommende dsolution on SO -- How to horizontally center a <div> in another <div>?, but its not centering it. The basic layout is this

#revealScoreMobile {
  padding: 10px;
  display: block;
  text-align: center;
  width: 100%;
}

.stats {
  text-align: center;
  width: 100%;
  background-color: red;
  margin: 0 auto;
}

<div id="revealScoreMobile">
  ...
  <div class="stats" style="">
    <div class="score">5.0</div>
    (<span class="votesCast">1</span> votes cast)
  </div>
</div>

and yet as you can see from the Fiddle -- https://jsfiddle.net/5Lgu0uw3/2/, the child DIV is not centering within the parent, despite the fact I have

text-align:center;

in there. What gives? What else do I need to do to center that DIV within its parent?

Text-align: center; does only center **TEXT** so yes, you need more then it to center align it. — Persijn, Feb 12 '18 at 21:38
yes, you need to use another property other than `text-align`. Also, this site has a "search" function: https://stackoverflow.com/search?q=center+div ;-) — giorgiga, Feb 12 '18 at 21:40
Possible duplicate of [How to horizontally center a
in another
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — giorgiga, Feb 12 '18 at 21:40
@giorgiga, I edited my question to add more detail. I tried the "margin: 0 auto;" as recommended by that solution and it didn't work -- https://jsfiddle.net/5Lgu0uw3/2/ . I edited my quesiton to elaborate more. — , Feb 12 '18 at 22:05
@Persijn, What is this mystical extra property of which you speak? — , Feb 12 '18 at 22:05
Note that is not a minimal example. In the fiddle, you have set `.stats` to `display: table-cell` which alters the dynamic. — Heretic Monkey, Feb 12 '18 at 22:09
append `#revealScoreMobile { margin: 0 auto; width: 250px }` to your css. Note this is exactly what is suggested in https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div — giorgiga, Feb 12 '18 at 22:12
@giorgiga, Oh I thought they wnted to apply that property on the inner DIV, whereas "#revealScoreMobile" is my outer DIV. Still I tried that property on the outer DIV and it did not center the inner DIV -- https://jsfiddle.net/5Lgu0uw3/4/ . — , Feb 12 '18 at 22:34

score 0 · Answer 1 · answered Feb 12 '18 at 23:27

As others have suggested in the comments, text-align: center; only applies to text content, not the inner div.

Your CSS applies width: 100%; to .stats which is forcing it to take up the full width of it's parent container #revealScoreMobile, which is also width: 100%;. Secondly it needs display: inline-block; to override the previous display: table-cell; as present in your jsfiddle example.

Replace in your CSS:

.stats {
  display: inline-block;
  text-align: center;
  background-color: red;
  margin: 0 auto;
}

score 0 · Accepted Answer · answered Feb 13 '18 at 00:58

I am not completely sure what you want, but if you want the inner DIV NOT have the full width, but only as much as its text contents require, make it an inline-block and erase the widthsetting (or give it a widthsetting less than 100%). inline-blocks are affected by text-align: center

(note that I erased some superfluous settings, but put the ... content into its own DIV, since it otherwise would be on one line with the subsequent inline-block.

#revealScoreMobile {
  padding: 10px;
  text-align: center;
}

.stats {
  display: inline-block;
  text-align: center;
  background-color: red;
}

<div id="revealScoreMobile">
 <div> ... </div>
  <div class="stats" style="">
    <div class="score">5.0</div>
    (<span class="votesCast">1</span> votes cast)
  </div>
</div>

Do I need to use another property other than "text-align" to center my DIV within a DIV?

2 Answers2