使用 Bootstrap 对齐左边缘时居中列表项

Question

我在网站上使用以下引导模式（列表项较少的简化示例）：

#manufacturer-modal .modal-body {
  padding: 0;
}

#manufacturer-modal .nav-item {
  list-style: none;
}

#manufacturer-modal .nav-link {
  font-size: 1.2em;
  font-weight: 500;
  letter-spacing: -1px;
  display: flex;
  align-items: center;
  justify-content: left;
  width: 100%;
  height: 3.5em;
  border-bottom: 1px solid #dee2e6;
  padding: 0;
}

#manufacturer-modal .nav-link img {
  width: 80%;
  max-width: 2.6em;
  margin: 0 1.5em;
  display: block;
}

.show {
  display: block !important;
}

<div class="modal-body">
  <li class="nav-item">
    <a class="nav-link" href="#">
      <img src="/images/badges/img.svg" alt="">
      <span>Item 1</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <img src="/images/badges/img.svg" alt="">
      <span>Item 2</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <img src="/images/badges/img.svg" alt="">
      <span>Item 3</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <img src="/images/badges/img.svg" alt="">
      <span>Item 4</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <img src="/images/badges/img.svg" alt="">
      <span>Item 5</span></a>
  </li>
</div>

默认情况下它是左对齐的，虽然整洁，但居中看起来会更好：

但是，当我将其与 justify-content:center 居中时，它会失去沿左边缘的整齐对齐方式：

如何通过保持项目与相同的左边缘对齐，同时将它们置于模态的中间来获得两全其美的效果？我突然想到，我想要的可能涉及某种形式的边距和/或填充，但是在开发工具中没有多少弄乱它们可以使这个工作正常，所以我显然遗漏了一些东西，我现在不知所措。

Answer 1

我会做一些事情。首先，将列表项放在列表元素中。这是有效 HTML 所必需的。

然后，使用flush list group 而不是导航菜单。它的初始样式更接近您想要的。

最后，使容器成为具有 Bootstrap 类的 flexbox 元素，并证明其内容中心的合理性。这可以是模态主体或内部元素。您必须在 nav-link 元素上摆弄水平填充，以使列表项边框在您使用的每个模态尺寸下变为全宽。

请注意，我没有编写任何 CSS。我还删除了您的大部分自定义 CSS，并将其替换为 Bootstrap 类。我强烈建议非常熟悉 Bootstrap 的组件和flex utilities。您不想为开箱即用的事情编写自定义 CSS。这让你现在和以后有更多的工作。

/* #manufacturer-modal */ .list-group-item {
  font-size: 1.2em;
  font-weight: 500;
  letter-spacing: -1px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="modal-body d-flex justify-content-center">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">
      <a class="nav-link text-dark" href="#">
        <img src="https://via.placeholder.com/60" alt="" class="mx-3">
        <span>Item 1 with a Longer Title</span></a>
    </li>
    <li class="list-group-item">
      <a class="nav-link text-dark" href="#">
        <img src="https://via.placeholder.com/60" alt="" class="mx-3">
        <span>Item 2</span></a>
    </li>
    <li class="list-group-item">
      <a class="nav-link text-dark" href="#">
        <img src="https://via.placeholder.com/60" alt="" class="mx-3">
        <span>Item 3</span></a>
    </li>
    <li class="list-group-item">
      <a class="nav-link text-dark" href="#">
        <img src="https://via.placeholder.com/60" alt="" class="mx-3">
        <span>Item 4</span></a>
    </li>
    <li class="list-group-item">
      <a class="nav-link text-dark" href="#">
        <img src="https://via.placeholder.com/60" alt="" class="mx-3">
        <span>Item 5</span></a>
    </li>
  </ul>
</div>

Answer 2

使用“对齐内容中心”为您的导航项目保留两个父 div flex 元素，这些代码将您的项目对齐为 div 的中心并左对齐。

.first-parent {
  display: flex;
  justify-content: center;
}

.second-parent {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

<div class="first-parent">
  <div class="second-parent">
        <div>Item one</div>
        <div>Item two loreum</div>
  </div>
</div>