Question

我已经查看了其他问题，但我仍然无法弄清楚。对不起，重新发布。我尝试使用 text-align: center、margin: 0 auto; 和 display: flex;，但最终没有成功。

对于格式不正确，我真的很抱歉。

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>

Answer 1

可能有更有效的方法来做到这一点，但这就是我要做的：

编辑：这是我尽我所能的解释！你尝试过的三件事，text-align: center，margin: 0 auto；和 display: flex 不一定会自行完成您需要的操作（尽管说实话，我仍在学习自动保证金的工作原理）。

使用 display: flex，您的元素将默认设置为 flex-direction: row 和 justify-content: flex-start（本质上位于左上角）。您需要 justify-content: center 才能让子元素居中。

我尝试将 flex 和 justify-content center 添加到 #BreadDiv 中，但它在整个屏幕上扩展了 div 的边框。如果这是您想要的，您可以将 display flex 和 justify-content center 移动到 CSS 的 #BreadDiv 部分。但是，如果您希望边框区域居中而不扩展它，您可以创建一个单独的 div 来包裹整个 #BreadDiv，我已经用 #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>

Answer 2

text-align: center; 不会对齐自己而是对齐它的孩子。因此，您首先不会将 #BreadDiv 框与中心对齐。如果您添加 body { text-align: 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>

然而，每个其他内联或内联块元素也将与中心对齐。因此，我们应该采取不同的方法。我们应该使用 display: inline-block; 而不是使用 display: block;。然而，这将导致不同的问题。块将不再只是需要的宽度，而是整个可能的空间。我们可以使用以下方法修复：width: min-content;。这修复了宽度问题，但会导致意外换行行为的问题。我们可以使用以下方法修复：white-space: nowrap;。然后它工作得很好，如下面的示例所示。这也允许我们通过删除所有不必要的 display: inline; 和 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>

Answer 3

检查此解决方案。

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>

居中内联块 div – ul?

3 个答案: