如何实现列表文本在圆形元素中的垂直居中显示？

嘿，我来帮你搞定这个垂直居中的小问题！你已经通过text-align: center实现了水平居中，现在只需要给<li>元素添加一点样式，就能让文本在圆形里完美垂直居中啦。下面给你几个实用的方案：

方案1：Flexbox（推荐，适配多行文本） #

Flexbox是现代浏览器最推荐的布局方式，不管文本是单行还是多行，都能轻松实现居中。你只需要修改.items ul li的样式：

.items ul li {
  width: 200px;
  height: 200px;
  background: white;
  border-radius: 200px;
  float: left;
  margin-left: 150px;
  margin-bottom: 50px;
  text-align: center;
  /* 新增以下两行 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中（和text-align效果互补，更保险） */
}

方案2：Line-height（适合单行文本） #

如果你的列表文本都是单行的，可以直接把line-height设置成和<li>的height一样的值，这样文本会自动垂直居中：

.items ul li {
  /* 原有样式不变 */
  line-height: 200px; /* 新增这一行，值和height一致 */
}

⚠️ 注意：如果文本换行成多行，这个方法会让行间距变得很大，所以只适合单行场景。

方案3：Table-cell布局（兼容老浏览器） #

如果需要兼容IE这类老浏览器，可以用表格布局的方式：

.items ul li {
  width: 200px;
  height: 200px;
  background: white;
  border-radius: 200px;
  float: left;
  margin-left: 150px;
  margin-bottom: 50px;
  /* 替换原有text-align，新增以下样式 */
  display: table;
}
/* 给li里的文本加个容器，或者直接给文本设置 */
.items ul li span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

对应的HTML也要调整一下：

<li><span>Printed-T-Shirts</span></li>
<li><span>Get Your Print</span></li>
<li><span>Choose A Design</span></li>

挑一个适合你场景的方案试试，应该就能完美解决垂直居中的问题啦！

内容的提问来源于stack exchange，提问作者Tareq Monwer