flexbox：设置对齐项目中心，但文本将继续到底部，而不是从中心扩展到顶部和底部

【问题标题】：flexbox: set align-items center but text will continue to the bottom instead of the expanding to the top and bottom from centerflexbox：设置对齐项目中心，但文本将继续到底部，而不是从中心扩展到顶部和底部
【发布时间】：2021-10-22 21:11:02
【问题描述】：

我正在尝试创建类似于下图的内容，其中所有内容都居中对齐，但如果文本超过 1 行，则让第二行位于中心下方。换句话说，不是让文本的中心居中对齐，我希望第一句话是用于居中对齐的内容。我该如何处理？提前致谢。

【问题讨论】：

你试过white-space:nowrap

标签： css flexbox alignment text-align

【解决方案1】：

嗯，它并不漂亮，但它是一个可行的解决方案：将文本高度设置为固定值，即 1 行文本，让它自动溢出。

ul {
  display: flex;
  list-style-type:none;
  padding:0;
  margin:0;
}

li {
  margin:10px;
  background:#FFEEAA;
  display:flex;
  text-align:center;
  align-items:center;
  max-width:200px;
  border:1px solid #363327;
}

strong {
  height:1em;
  background:#C6B884;
  padding:0 20px;
}

i {
  font-style:normal;
  font-size:40px;
  border-right:1px solid #363327;
}

<ul>
    <li><i>☆</i><strong>single line</strong></li>
    <li><i>☆</i><strong>this one is multiple lines</strong></li>
    <li><i>☆</i><strong>single line</strong></li>
</ul>

【讨论】：