Question

我的网页上有一个导航菜单（标题菜单），实际上它是动态内容。动态菜单项已加载到ul>li>{dynamic_content}中。我想要该导航栏（我的意思是ul）位于该部分的中心中，而不是垂直放置，而是水平放置。我可以使用text-align:center，因为它有多个子标签。

我也无法执行以下操作

.class{
  width:50%;
  margin-left:auto;
  margin-right:auto;
 }

因为这是一种动态导航，所以我无法设置width。

您可能会想为什么我不能尝试

.class{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
 }

这也是无法完成的，因为我无法设置position:absolute，因为它将成为滚动显示的固定标题。它会在响应中出现一些位置问题。

我正在寻找解决此问题的替代方法。

Answer 1

您可以从 flexbox 使用justify-content: center。

.container {
  display: flex;
  justify-content: center;
}

<div class="container">
  <span>Title 1</span>
  <span>Title 2</span>
  <span>Title 3</span>
</div>

Answer 2

使用flexbox将列表在页面上居中。

nav {
  width: 100%;
  display: flex;
  justify-content: center;
}

ul {
  margin: 0;
  display: flex;
  list-style: none;
}

li:not(:last-child) {
  margin-right: 1rem;
}

<nav>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</nav>

Answer 3

如果您正在寻找对旧浏览器的支持，另一种选择是使用显示表，具体说明std::launder

std::launder

.something-semantic {
  display: table;
  width: 100%;
}
.something-else-semantic {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

Answer 4

我认为我想出了一种水平对齐内容的新方法，这对我来说很好，并且与浏览器兼容性没有问题。

用div包装导航，并设置text-align:center并将display:inline-block添加到我想居中的ul上。

div {
  text-align: center;
}

ul {
  display:inline-block;
  list-style-type: none;
}

ul>li{
  float:left;
}

<div>
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</div>

动态内容的水平对齐（特殊情况）

4 个答案: