如何实现<ul>标签内<li>元素的居中对齐？

嘿，我完全懂你的烦恼——当给<li>加了float: left之后，父元素的text-align: center确实起不到作用了，因为浮动元素会脱离常规文档流。不过有几个简单又实用的方法能搞定这个布局问题，我给你一步步说明：

方法1：使用Flexbox布局（推荐） #

Flexbox是现代布局的首选方案，代码简洁且兼容性好。只需要调整<ul>的样式，同时去掉<li>的浮动：

/* 合并你的两个aside样式，减少冗余 */
aside {
  font-size: 150%;
  font-family: fantasy;
  font-variant: small-caps;
  line-height: 2em;
  background: rgba(187,219,136,0.75);
  width: 90%;
  height: 50px;
  text-align: center;
  margin: auto;
  margin-top: 20px;
}

aside ul {
  list-style: none; /* 去掉默认的列表圆点 */
  margin: 0;
  padding: 0;
  display: flex; /* 启用flex布局 */
  justify-content: center; /* 让子元素水平居中 */
  align-items: center; /* 让子元素垂直居中（和aside的height匹配） */
  height: 100%; /* 占满aside的高度，确保垂直居中生效 */
}

aside li {
  /* 去掉float: left; */
  padding: 0 2%;
  font-size: 100%;
}

这样设置后，<li>元素会自动在<ul>里水平居中，同时垂直方向也和aside的高度对齐，布局非常规整。

方法2：用inline-block替代float #

如果你更习惯传统布局方式，可以把<li>的float换成display: inline-block，然后给<ul>设置text-align: center：

aside {
  /* 同样合并样式 */
  font-size: 150%;
  font-family: fantasy;
  font-variant: small-caps;
  line-height: 2em;
  background: rgba(187,219,136,0.75);
  width: 90%;
  height: 50px;
  text-align: center;
  margin: auto;
  margin-top: 20px;
}

aside ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center; /* 让inline-block的子元素居中 */
  line-height: 50px; /* 和aside的height一致，实现文本垂直居中 */
}

aside li {
  /* 去掉float: left; */
  display: inline-block; /* 让li并排且支持text-align */
  padding: 0 2%;
  font-size: 100%;
}

这个方法利用了inline-block元素会受父元素text-align影响的特性，同样能实现居中效果，适合需要兼容旧浏览器的场景。

两种方法都能解决你的问题，个人更推荐Flexbox，它的布局能力更强，后续如果要调整排列方式也更灵活。

内容的提问来源于stack exchange，提问作者Carolina Moura