我想使用flexbox垂直对齐一些内容在一个<li>,但没有很大的成功。

我在网上检查过,许多教程实际上使用了一个包装器div,它从父上的伸缩设置中获得align-items:center,但我想知道是否有可能删除这个额外的元素?

在这个例子中,我选择使用flexbox,因为列表项的高度将是一个动态%。

* { 填充:0; 保证金:0; } 超文本标记语言 身体{ 高度:100%; } ul { 高度:100%; } 李{ 显示:flex; justify-content:中心; align-self:中心; 背景:银色; 宽度:100%; 高度:20%; } < ul > <li>这是文本</li> < / ul >


当前回答

结果

HTML

<ul class="list">
  <li>This is the text</li>
  <li>This is another text</li>
  <li>This is another another text</li>
</ul>

使用align-items而不是align-self,我还添加了flex-direction到column。

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.list {
  display: flex;
  justify-content: center;
  flex-direction: column;  /* <--- I added this */
  align-items: center;   /* <--- Change here */
  height: 100px;
  width: 100%;
  background: silver;
}

.list li {  
  background: gold;
  height: 20%; 
}

其他回答

最好的做法是将一个flexbox嵌套在一个flexbox中。你所要做的就是给子元素align-items: center。这将垂直对齐父文本。

// Assuming a horizontally centered row of items for the parent but it doesn't have to be
.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  display: flex;
  align-items: center;
}

使用display: flex可以控制HTML元素的垂直对齐。

.box { 身高:100 px; 显示:flex; 对齐项目:中心;/*垂直*/ justify-content:中心;/*水平*/ 边框:2px纯黑色; } .box div { 宽度:100 px; 高度:20 px; 边界:1 px固体; } < div class = "盒子" > < div > < / div >你好 世界< p > < / p > < / div >

align -self不会对齐li内的项。相反,它将li作为一个整体对齐。

使用align-items将对li中的文本进行对齐。 检查这段代码。它的工作原理。 * { 填充:0; 保证金:0; } 超文本标记语言 身体{ 高度:100%; } ul { 高度:100%; } 李{ 显示:flex; justify-content:中心; 对齐项目:中心; 背景:银色; 宽度:100%; 高度:20%; } < ul > <li>这是文本</li> < / ul >

结果

HTML

<ul class="list">
  <li>This is the text</li>
  <li>This is another text</li>
  <li>This is another another text</li>
</ul>

使用align-items而不是align-self,我还添加了flex-direction到column。

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.list {
  display: flex;
  justify-content: center;
  flex-direction: column;  /* <--- I added this */
  align-items: center;   /* <--- Change here */
  height: 100px;
  width: 100%;
  background: silver;
}

.list li {  
  background: gold;
  height: 20%; 
}

.flex-container { display: flex; height: 300px; align-items: center; justify-content: center; width: 100%; } .flex-child { display: flex; width: 100%; background-color: khaki; border: 1px solid #000; align-items: center; justify-content: center; height: 100px; margin: 10px; padding: 10px; } <div class="container flex-container"> <div class="flex-child item-1">English</div> <div class="flex-child item-2"> English</div> <div class="flex-child item-3"> English</div> </div>