Center inline-block div – ul?

Question

I've looked at other questions, but I still couldn't make this out. Sorry for the repost. I tried using text-align: center, margin: 0 auto; and display: flex; but it didn't work out in the end.

I'm really sorry for the bad formatting.

body {
  background-color: #333;
}

div#BreadDiv {
  display: inline-block;
  text-align: center;
  margin: 0 auto;
  box-shadow: 0 2px 8px black;
  border: 1px solid #4A4A4B;
}

ul.BreadUl {
  display: inline-block;
  position: static;
  text-align: center;
  list-style: none;
  border: 1px solid #4A4A4B;
  font-size: 150%;
  padding: 8px 15px;
  margin: 0 auto;
}

ul.BreadUl li {
  display: inline-block;
  color: #AAA;
  text-align: center;
  margin: 5px auto;
}

ul.BreadUl li+li:before {
  content: "/ ";
}

ul.BreadUl li a {
  color: #CCC;
  text-decoration: none;
}

ul.BreadUl li a:hover {
  text-decoration: underline;
}

<div id="BreadDiv">
  <ul class="BreadUl">
    <li><a href="#">Library</a></li>
    <li><a href="#">Folder</a></li>
    <li>Document</li>
  </ul>
</div>

There is no `display: flex;` in the code you posted (?) – Johannes Mar 02 '21 at 00:41 — Johannes, Mar 02 '21 at 00:41

neonpinkpotatoes · Answer 1 · 2021-03-02T03:10:49.237

There might be a more efficient way to do this, but this is what I'd do:

Edit: Here's an explanation to the best of my ability! The three things you tried, text-align: center, margin: 0 auto; and display: flex don't necessarily do what you need on their own (though to be honest I'm still learning how margin auto works).

With display: flex, your elements will be set by default to flex-direction: row and justify-content: flex-start, (which is essentially top-left). You need justify-content: center to get the child elements to center themselves.

I attempted to add flex and justify-content center to the #BreadDiv but it extended the border of the div across the whole screen. If that's what you want, you can move the display flex and justify-content center to the #BreadDiv section of your CSS. However, if you want the bordered area centered without extending it, you can create a separate div which encases the entire #BreadDiv, which I've done with #Container.

body {
  background-color: #333;
}

div#Container {
  display: flex;
  justify-content: center;
}

div#BreadDiv {
  display: inline-block;
  text-align: center;
  margin: 0 auto;
  box-shadow: 0 2px 8px black;
  border: 1px solid #4A4A4B;
}

ul.BreadUl {
  display: inline-block;
  position: static;
  text-align: center;
  list-style: none;
  border: 1px solid #4A4A4B;
  font-size: 150%;
  padding: 8px 15px;
  margin: 0 auto;
}

ul.BreadUl li {
  display: inline-block;
  color: #AAA;
  text-align: center;
  margin: 5px auto;
}

ul.BreadUl li+li:before {
  content: "/ ";
}

ul.BreadUl li a {
  color: #CCC;
  text-decoration: none;
}

ul.BreadUl li a:hover {
  text-decoration: underline;
}

<div id="Container">
  <div id="BreadDiv">
    <ul class="BreadUl">
      <li><a href="#">Library</a></li>
      <li><a href="#">Folder</a></li>
      <li>Document</li>
    </ul>
  </div>
</div>

Hi and Welcome to SO. Even though your anwser might anwser the question, it can be considered low quality. Your anwser misses an explaination of the issue aswell as an explaination of your solution. Without it, it will be hard to understand your solution and therefor hard to reproduce it. As such please edit your anwser to contain the explaination. — tacoshy, Mar 02 '21 at 02:04
Your explanation is probably better than mine, but for learning purposes could you let me know if my edited explanation is more sufficient? — neonpinkpotatoes, Mar 02 '21 at 02:56
There are some informatiosn that are technically incorrect. I not going to fully eleborate it. Just as example: `Text-align can only align the text itself and not the entire div` which is incorrect. `text-align` does not aling texts, but `inline` and `inline-block` elements. `
` are by default `block`level elements. However they can be switched as the OP did. Your solution works. Using flex is a good way. I just decided not to use it as you already did and I prefer to not change existing HTML structures if possible for simplicity reasons. — tacoshy, Mar 02 '21 at 03:05
But in the end, you have the explanation added. You meet the SO guidlines with the added explanation and the technical incorrect parts are not important enough to downrate it. SO all fine :) — tacoshy, Mar 02 '21 at 03:09
I have removed the factually incorrect part and noted for future posts! — neonpinkpotatoes, Mar 02 '21 at 03:12

score 0 · Accepted Answer · answered Mar 02 '21 at 02:18

text-align: center; will not align itself but its children. As such you dont align the #BreadDiv Box to the center in the first place. If you add body { text-align: center; } the box will be aligned to the center:

body {
  background-color: #333;
  text-align: center;
}

div#BreadDiv {
  display: inline-block;
  text-align: center;
  margin: 0 auto;
  box-shadow: 0 2px 8px black;
  border: 1px solid #4A4A4B;
}

ul.BreadUl {
  display: inline-block;
  position: static;
  text-align: center;
  list-style: none;
  border: 1px solid #4A4A4B;
  font-size: 150%;
  padding: 8px 15px;
  margin: 0 auto;
}

ul.BreadUl li {
  display: inline-block;
  color: #AAA;
  text-align: center;
  margin: 5px auto;
}

ul.BreadUl li+li:before {
  content: "/ ";
}

ul.BreadUl li a {
  color: #CCC;
  text-decoration: none;
}

ul.BreadUl li a:hover {
  text-decoration: underline;
}

<div id="BreadDiv">
  <ul class="BreadUl">
    <li><a href="#">Library</a></li>
    <li><a href="#">Folder</a></li>
    <li>Document</li>
  </ul>
</div>

However as such, every other inline or inline-block element will be aligned to the center aswell. As such we should take a different approach. Instead of using display: inline-block; we should use display: block;. That however will cause a different issue. The block no longer will only be as wide as needed but the entire possible space. That we can fix by using: width: min-content;. That fixes the width issue but will cause the issue of an unintended wrap behavior. That we can fix by using: white-space: nowrap;. Then it works perfectly fine as shown in the sample below. This also allows us to minimize the code by removin all the unecessary display: inline; and text-align: center;:

body {
  background-color: #333;
}

div#BreadDiv {
  display: block;
  margin: 0 auto;
  box-shadow: 0 2px 8px black;
  border: 1px solid #4A4A4B;
  width: min-content;
  white-space: nowrap;
}

ul.BreadUl {
  list-style: none;
  border: 1px solid #4A4A4B;
  font-size: 150%;
  padding: 8px 15px;
  margin: 0;
}

ul.BreadUl li {
  color: #AAA;
  margin: 5px auto;
}

ul.BreadUl li+li:before {
  content: "/ ";
}

ul.BreadUl li a {
  color: #CCC;
  text-decoration: none;
}

ul.BreadUl li a:hover {
  text-decoration: underline;
}

<div id="BreadDiv">
  <ul class="BreadUl">
    <li><a href="#">Library</a></li>
    <li><a href="#">Folder</a></li>
    <li>Document</li>
  </ul>
</div>

score -1 · Answer 3 · answered Mar 02 '21 at 03:46

check this solution.

body {
  background-color: #333;
}

div#BreadDiv {
  display: block;
  text-align: center;
  margin: 0 auto;
  
}

ul.BreadUl {
  display: inline-block;
  position: static;
  text-align: center;
  list-style: none;
  border: 1px solid #4A4A4B;
  box-shadow: 0 2px 8px black;
  font-size: 150%;
  padding: 8px 15px;
  margin: 0 auto;
}

ul.BreadUl li {
  display: inline-block;
  color: #AAA;
  text-align: center;
  margin: 5px auto;
}

ul.BreadUl li+li:before {
  content: "/ ";
}

ul.BreadUl li a {
  color: #CCC;
  text-decoration: none;
}

ul.BreadUl li a:hover {
  text-decoration: underline;
}

<div id="BreadDiv">
  <ul class="BreadUl">
    <li><a href="#">Library</a></li>
    <li><a href="#">Folder</a></li>
    <li>Document</li>
  </ul>
</div>

Downvoted for following reasons: Your answer contains no explanation. `try this... +code` only answers can be considered low quality. Your snieppte clearly shows that the outcome differs from the intended outcome. Your block spans the entire width not only `minimum content` width. All the unnecessary code lines remain. A full explanation of `display: block;` can be read in my answer that I gave 2h before you. — tacoshy, Mar 02 '21 at 11:37

Center inline-block div – ul?

3 Answers3