CSS - Div Not Centering

Question

body {
  background: #212121;
}

.wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.holder{
  height: 50%;
  width: 100%;
  position: absolute;
  top: 25%;
  left: 0%;
}

.content {
  height: 100%;
  width: 400px;
  margin: 10px;
  display: inline-block;
  background: #424242;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
}

.detailBox {
  height: 100%;
  display: inline-block;
  font-size: 0;
  margin: 0 auto;
}

<div class="wrapper">
   <div class="holder">
    <div class="detailBox">
     <div class="content" id="row1">
      <div class="wordInputContainer">
       <div class="inputBox">
        
       </div>
      </div>
     </div>
     <div class="content" id="row2">
      <div class="wordOutputContainer">
       <div class="listBox">
        <!-- List Elements Go Here -->
        <!-- Words Output In Alphabetical Order [A - Z] -->
       </div>
      </div>
     </div>
     <div class="content" id="row3">
      <div class="wordStatisticContainer">
       <div class="wordCount"></div>
       <div class="commonLetter"></div>
       <div class="commonWord"></div>
       <div class="longestWord"></div>
       <div class="shortestWord"></div>
      </div>
     </div>
    </div>
   </div>
  </div>

Even though I have margin: 0 auto; on the .detailedBox it still isn't centering. Is it because it doesn't have a fix width? It doesn't have a fixed width because I want the .detailedBox to be the width of all the .content's combined, but also centered.

Possible duplicate of [margin:auto; with inline-block](https://stackoverflow.com/questions/19076919/marginauto-with-inline-block) AND/OR [Why centering with margin 0 auto works with display:block but does not work with display:inline-block?](https://stackoverflow.com/questions/24442060/why-centering-with-margin-0-auto-works-with-displayblock-but-does-not-work-with) — showdev, Jul 14 '17 at 21:28

score 2 · Answer 1 · answered Jul 14 '17 at 21:16

2

If you change .detailBox to have display: flex (instead of inline-block) and then do justify-content: center then it'll center that div horizontally.

answered Jul 14 '17 at 21:16

Ryo-code

1,460
2
10
12

I love your answer because its short and sweet, but since stack overflow is more about helping future users who may stumble upon this problem I have to choose a answer that is in more detail and explains whats going on in detail. – Seth J. Freeman Jul 14 '17 at 22:07

showdev · Accepted Answer · 2017-07-14T21:27:15.513

Since .detailBox is set to inline-block, it cannot be centered by using margin:0 auto. One way to understand this is that the "margin centering" technique relies on "filling up" available horizontal space. But there is no available space when using an inline element. (Reference: margin:auto; with inline-block.)

Also note that:

10.3.9 'Inline-block', non-replaced elements in normal flow
If 'width' is 'auto', the used value is the shrink-to-fit width as for floating elements.
A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.
— w3.org

One alternative is to let .detailBox default to display:block and set text-align:center to horizontally center it's child .content elements, which are inline-block.

body {
  background: #212121;
}

.wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.holder {
  height: 50%;
  width: 100%;
  position: absolute;
  top: 25%;
  left: 0%;
}

.content {
  height: 100%;
  width: 100px;
  margin: 10px;
  display: inline-block;
  background: #424242;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
}

.detailBox {
  height: 100%;
  font-size: 0;
  text-align:center;
}

<div class="wrapper">
  <div class="holder">
    <div class="detailBox">
      <div class="content" id="row1">
        <div class="wordInputContainer">
          <div class="inputBox">

          </div>
        </div>
      </div>
      <div class="content" id="row2">
        <div class="wordOutputContainer">
          <div class="listBox">
            <!-- List Elements Go Here -->
            <!-- Words Output In Alphabetical Order [A - Z] -->
          </div>
        </div>
      </div>
      <div class="content" id="row3">
        <div class="wordStatisticContainer">
          <div class="wordCount"></div>
          <div class="commonLetter"></div>
          <div class="commonWord"></div>
          <div class="longestWord"></div>
          <div class="shortestWord"></div>
        </div>
      </div>
    </div>
  </div>
</div>

You mentioned that you want .detailBox to be the width of all the content combined. So, if for some reason you need .detailBox to remain inline-block, you could set text-align:center on it's parent, .holder. Like this:

body {
  background: #212121;
}

.wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.holder {
  height: 50%;
  width: 100%;
  position: absolute;
  top: 25%;
  left: 0%;
  text-align:center;
}

.content {
  height: 100%;
  width: 100px;
  margin: 10px;
  display: inline-block;
  background: #424242;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
}

.detailBox {
  height: 100%;
  display:inline-block;
  font-size: 0;
}

<div class="wrapper">
  <div class="holder">
    <div class="detailBox">
      <div class="content" id="row1">
        <div class="wordInputContainer">
          <div class="inputBox">

          </div>
        </div>
      </div>
      <div class="content" id="row2">
        <div class="wordOutputContainer">
          <div class="listBox">
            <!-- List Elements Go Here -->
            <!-- Words Output In Alphabetical Order [A - Z] -->
          </div>
        </div>
      </div>
      <div class="content" id="row3">
        <div class="wordStatisticContainer">
          <div class="wordCount"></div>
          <div class="commonLetter"></div>
          <div class="commonWord"></div>
          <div class="longestWord"></div>
          <div class="shortestWord"></div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS - Div Not Centering

2 Answers2