flexbox：设置 align-items center 但文本将继续到底部而不是从中心扩展到顶部和底部
flexbox: set align-items center but text will continue to the bottom instead of the expanding to the top and bottom from center
我正在尝试创建类似于下图的内容，其中所有内容都居中对齐，但如果文本超过 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>
我正在尝试创建类似于下图的内容，其中所有内容都居中对齐，但如果文本超过 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>