html - 如何在 div 中居中列表

标签 html css flexbox

<分区>

如何在导航中将列表居中?我想列出内容,以“nav”为中心,li 的高度与 nav 的高度相同。这是我的第一篇英文帖子,所以请理解。

header
{
  width: 100%;
  color: white;
  text-align: center;
  font-size: 4.5vw;
}
nav
{
  background: #3095d3;
  width: 100%;
  text-align: center;
  display: inline-flex;
}
ul
{
  list-style-type: none;
  margin: 0;
}
ul > li
{
  padding: 1vw;
  float: left;
  font-size: 2.5vw;
}

li:hover
{
  background: #50B5F3;
}
  <header>
    Anon
    <nav>
      <ul>
        <li>cont1</li>
        <li>cont2</li>
        <li>cont3</li>
        <li>cont4</li>
      </ul>
    </nav>
  </header>

最佳答案

您可以简单地将 margin: auto 添加到您的 ul 元素。

Fiddle here

关于html - 如何在 div 中居中列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43417323/

上一篇:html - 一个或两个表格以 div 为中心

下一篇:html - 相对位置不采用div的自动宽度

相关文章:

javascript - 从对象 HTMLInputElement 获取文本

java - Spring-Boot Thymeleaf 以 html 形式加载图像,但列表不显示

html - 使 flexbox 垂直增长

html - 当所有子项都有 flex 属性时,父项的 justify-content 是否重要?

html - 如何解决 flexbox 内容太大,页眉和页脚不拉伸(stretch)?

php - php托管中的html5?

java - 如何在jsp中获取禁用文本字段的值

html - 使用 flexbox 创建两列布局

javascript - react.js antd 模态错误行为

javascript - 当用户试图离开页面窗口或关闭选项卡时如何显示弹出窗口?