CSS - Div Not Centering [duplicate] - css

Question

This question already has answers here:
CSS center display inline block?
(9 answers)
Closed 5 years ago.
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.

Answer 1

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.

Answer 2

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>