如何将文本垂直对齐?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (78)

我想使用弹出框垂直对齐内部的一些内容,<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%;
}
<ul>
  <li>This is the text</li>
</ul>
提问于
用户回答回答于

使用align-items: center,而不是align-self: center。

这是代码,只需进行一次调整即可完成所有工作:

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  /* align-self: center;    <---- REMOVE */
  align-items: center;   /* <---- NEW    */
  background: silver;
  width: 100%;
  height: 20%; 
}

align-self属性适用于弹性项目。除了你li的不是一个弹性项目,因为它的父 - ul- 没有display: flexdisplay: inline-flex应用。

因此,这ul不是一个弹性容器,li它不是一个弹性物品,并且align-self不起作用。

align-items属性align-self与之类似,但也适用于柔性容器。

由于li是一个弹性容器,align-items可用于垂直居中子元素。

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  /* align-self: center; */
  align-items: center;
  background: silver;
  width: 100%;
  height: 20%;
}

<ul>
  <li>This is the text</li>
</ul>

codepen演示

从技术上讲,这是如何align-itemsalign-self工作:

align-items属性(在容器上)设置的默认值align-self(在项目)。因此,align-items: center意味着所有的弹性项目将被设置为align-self: center

但是你可以通过调整align-self个别项目来覆盖此默认值。

例如,您可能需要等高度的列,因此容器已设置为align-items: stretch。但是,一个项目必须固定在顶部,因此它被设置为align-self: flex-start

文本如何是一个弹性项目?

运行如下代码:

<li>This is the text</li>

从CSS规范:

9.2.2.1匿名内联框 任何直接包含在块容器元素中的文本都必须被视为匿名内联元素。

Flexbox规范提供了类似的行为。

4.灵活的项目 Flex容器的每个流入子代都成为一个Flex项目,并且每个连续运行的文本都直接包含在Flex容器中,并被包装在一个匿名Flex项目中。

因此,该文本li是一个弹性项目。

用户回答回答于

如果flex-direction垂直(使用columnjustify-content: center垂直居中,然后你可以使用text-align: center水平居中。代码如下:

li {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

参考:http : //codepen.io/anon/pen/Fkhgo

所属标签

可能回答问题的人

  • 女淘日记

    杭州吱吱吱科技 · 站长 (已认证)

    1 粉丝1 提问3 回答
  • 朝夕熊博客

    1 粉丝2 提问3 回答
  • 13火麒麟

    1 粉丝0 提问2 回答
  • 找虫虫

    6 粉丝0 提问2 回答

扫码关注云+社区

领取腾讯云代金券