相关疑难解决方法(0)

如何在Flexbox中垂直对齐文本?

我想使用弹性框垂直对齐一些内容,<li>但没有取得很大的成功.

我已经在网上查了一下,很多教程实际上都使用了一个包装div来获取align-items:center父对象的flex设置,但是我想知道是否可以删除这个额外的元素?

我选择在此实例中使用弹性框,因为列表项高度将是动态%.

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  align-self: center;
  background: silver;
  width: 100%;
  height: 20%;
}
Run Code Online (Sandbox Code Playgroud)
<ul>
  <li>This is the text</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

html css flexbox

364
推荐指数
10
解决办法
44万
查看次数

标签 统计

css ×1

flexbox ×1

html ×1