我想使用flexbox垂直对齐一些内容在一个<li>，但没有很大的成功。
我在网上检查过，许多教程实际上使用了一个包装器div，它从父上的伸缩设置中获得align-items:center，但我想知道是否有可能删除这个额外的元素?
在这个例子中，我选择使用flexbox，因为列表项的高度将是一个动态%。
* { 填充:0; 保证金:0; ｝ 超文本标记语言 身体{ 高度:100%; ｝ ul { 高度:100%; ｝ 李{ 显示:flex; justify-content:中心; align-self:中心; 背景:银色; 宽度:100%; 高度:20%; ｝ < ul > <li>这是文本</li> < / ul >
当前回答
align -self不会对齐li内的项。相反，它将li作为一个整体对齐。
使用align-items将对li中的文本进行对齐。 检查这段代码。它的工作原理。 * { 填充:0; 保证金:0; ｝ 超文本标记语言 身体{ 高度:100%; ｝ ul { 高度:100%; ｝ 李{ 显示:flex; justify-content:中心; 对齐项目:中心; 背景:银色; 宽度:100%; 高度:20%; ｝ < ul > <li>这是文本</li> < / ul >
其他回答
align -self不会对齐li内的项。相反，它将li作为一个整体对齐。
使用align-items将对li中的文本进行对齐。 检查这段代码。它的工作原理。 * { 填充:0; 保证金:0; ｝ 超文本标记语言 身体{ 高度:100%; ｝ ul { 高度:100%; ｝ 李{ 显示:flex; justify-content:中心; 对齐项目:中心; 背景:银色; 宽度:100%; 高度:20%; ｝ < ul > <li>这是文本</li> < / ul >
* { 填充:0; 保证金:0; ｝ Html, body { 高度:100%; ｝ ul { 高度:100%; ｝ 李{ 显示:flex; justify-content:中心; 对齐项目:中心; 背景:银色; 宽度:100%; 高度:20%; ｝ < ul > <li>这是文本</li> < / ul >
我就不写答案了，因为很多人已经给出了正确答案。但是，我想向您展示一个有用的工具，可以在将来避免此类问题。
在浏览器的Dev Tools中，你需要检查一个元素，并使用display: flex on，按屏幕截图中显示的图标。
然后，您将看到选择要显示的一些属性的选项:flex，这样您就可以轻松地快速检查所有选项，而不知道您可以使用什么
将li中的显示设置为flex，并将align-items设置为居中。
li {
display: flex;
/* Align items vertically */
align-items: center;
/* Align items horizontally */
justify-content: center;
}
我个人也会以伪元素为目标，并使用边界框 (通用选择器*和伪元素)
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
这取决于你的身高，再叫一件事线高
* { 填充:0; 保证金:0; ｝ 超文本标记语言 身体{ 高度:100%; ｝ ul { 高度:100%; ｝ 李{ 显示:flex; justify-content:中心; align-self:中心; 背景:银色; 宽度:100%; 高度:50 px;行高:50 px; ｝ < ul > <li>这是文本</li> < / ul >
