时间戳

首页 > 解决方案 > 如何使无序列表居中？

html - 如何使无序列表居中？

问题描述

我有一个列表和 CSS。

但是 ul 向左移动。我已经尝试了很多东西，但它要么保持内联并浮动到左侧，要么按照我的意愿移动到中心，但是它不是内联的，它们相互堆叠......我怎么能同时拥有一个居中的有序列表和排队？

.navbar {
  display: table;
  margin: 0 auto;
  width: 100%;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
}

.navbar ul li {
  display: inline-block;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 12px 16px;
  font-size: 25px;
  text-decoration: none;
}
<div class="navbar">
  <ul>
    <li><a href="#">The Stock</a></li>
    <li>
      <a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
    </li>
    <li><a href="#">The Stock</a></li>
  </ul>
</div>

标签： htmlcss

解决方案

居中navbar ul添加text-align: center;

.navbar {
  display: table;
  margin: 0 auto;
  width: 100%;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
  text-align: center;
}

.navbar ul li {
  display: inline-block;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 12px 16px;
  font-size: 25px;
  text-decoration: none;
}
<div class="navbar">
  <ul>
    <li><a href="#">The Stock</a></li>
    <li>
      <a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
    </li>
    <li><a href="#">The Stock</a></li>
  </ul>
</div>

推荐阅读