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

最新推荐文章于 2024-04-28 11:02:06 发布

asdfgh0077

最新推荐文章于 2024-04-28 11:02:06 发布

阅读量304

点赞数

文章标签： html css flexbox

原文链接：https://oldbug.net/q/1iCgf/How-to-vertically-align-text-inside-a-flexbox

版权

本文翻译自：How to vertically align text inside a flexbox?

I would like to use flexbox to vertically align some content inside an <li> but not having great success. 我想使用flexbox在<li>内垂直对齐某些内容，但没有取得很大的成功。

I've checked online and many of the tutorials actually use a wrapper div which gets the align-items:center from the flex settings on the parent, but I'm wondering is it possible to cut out this additional element? 我已经在线检查过，许多教程实际上使用包装器div，该包装器的div可以从父级的flex设置获取align-items:center ，但是我想知道是否可以切掉这个额外的元素？

I've opted to use flexbox in this instance as the list item height will be a dynamic % . 我选择在这种情况下使用flexbox，因为列表项的高度将是动态% 。

 * { 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>

#1楼

参考：https://stackoom.com/question/1iCgf/如何在Flexbox中垂直对齐文本

#2楼

You could change the ul and li displays to table and table-cell . 您可以将ul和li显示更改为table和table-cell 。 Then, vertical-align would work for you: 然后， vertical-align将为您工作：

ul {
    height: 20%;
    width: 100%;
    display: table;
}

li {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: silver;
    width: 100%; 
}

http://codepen.io/anon/pen/pckvK http://codepen.io/anon/pen/pckvK

#3楼

Edit: Please use Michael_B's answer instead of mine. 编辑：请使用Michael_B的答案代替我的答案。

I would delete this answer if I could, but accepted answers can't be deleted. 如果可以的话，我会删除此答案，但是无法删除已接受的答案。

If you make the flex-direction vertical (using column ) then justify-content: center centers vertically. 如果您将flex-direction设为垂直（使用column ），则justify-content: center垂直居中。 Then you can just use text-align: center to center horizontally as well. 然后，您可以只使用text-align: center来水平居中。

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

Here's a working demo in codepen . 这是Codepen中的工作示例。

#4楼

Instead of using align-self: center use align-items: center . 而不是使用align-self: center使用align-items: center 。

There's no need to change flex-direction or use text-align (as suggested in another answer ). 无需更改flex-direction或使用text-align （如另一个答案中所建议）。

Here's your code, with one adjustment, to make it all work: 这是您的代码，只需进行一些调整即可使其全部工作：

ul {
  height: 100%;
}

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

The align-self property applies to flex items . align-self属性适用于flex项目 。 Except your li is not a flex item because its parent – the ul – does not have display: flex or display: inline-flex applied. 除了您的li不是弹性项目之外，因为其父项ul没有应用display: flex或display: inline-flex 。

Therefore, the ul is not a flex container, the li is not a flex item, and align-self has no effect. 因此， ul不是flex容器， li不是flex项目，并且align-self不起作用。

The align-items property is similar to align-self , except it applies to flex containers . align-items属性类似于align-self ，不同之处在于它适用于flex容器 。

Since the li is a flex container, align-items can be used to vertically center the child elements. 由于li是flex容器，因此可以使用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 demo Codepen演示

Technically, here's how align-items and align-self work... 从技术上讲，这是align-items和align-self工作方式...

The align-items property (on the container) sets the default value of align-self (on the items). align-items属性（在容器上）设置align-self的默认值（在项目上）。 Therefore, align-items: center means all flex items will be set to align-self: center . 因此， align-items: center表示所有弹性项目都将设置为align-self: center 。

But you can override this default by adjusting the align-self on individual items. 但是您可以通过调整单个项目的align-self来覆盖此默认设置。

For example, you may want equal height columns, so the container is set to align-items: stretch . 例如，您可能需要等高的列，因此将容器设置为align-items: stretch 。 However, one item must be pinned to the top, so it is set to align-self: flex-start . 但是，必须将一项固定在顶部，因此将其设置为align-self: flex-start 。

example 例

How is the text a flex item? 文本是弹性项目吗？

Some people may be wondering how a run of text... 有些人可能想知道文本如何运行。

<li>This is the text</li>

is a child element of the li . 是li的子元素。

The reason is that text that is not explicitly wrapped by an inline-level element is algorithmically wrapped by an inline box. 原因是没有被内联级别元素显式包装的文本被内联框算法包装。 This makes it an anonymous inline element and child of the parent. 这使其成为匿名的内联元素和父级的子级。

From the CSS spec: 从CSS规范：

9.2.2.1 Anonymous inline boxes 9.2.2.1匿名内联框

Any text that is directly contained inside a block container element must be treated as an anonymous inline element. 直接包含在块容器元素内的任何文本都必须视为匿名内联元素。

The flexbox specification provides for similar behavior. flexbox规范提供了类似的行为。

4. Flex Items 4.弹性项目

Each in-flow child of a flex container becomes a flex item, and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item. flex容器的每个流入子元素都将成为一个flex项目，而直接包含在flex容器内的每个连续文本都将包裹在一个匿名flex项目中。

Hence, the text in the li is a flex item. 因此， li的文本是弹性项目。

#5楼

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

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

#6楼

For future Googlers, 对于未来的Google员工，

The most voted answer and the second most one too, are for solving this specific problem posted by OP, where the content(text) was being "algorithmic-ally" being wrapped inside inline block element. 投票率最高的答案也是投票数第二的答案，是用于解决由OP发布的此特定问题的，其中content（文本）被“算法联盟”包裹在嵌入式块元素内。 BUT, your case may be about centering a normal element vertically inside a container , which also applied in my case, so for that all you need is 但是，您的情况可能是将一个正常元素垂直居中放置在容器中 ，这也适用于我的情况，因此，您需要做的就是

align-self: center;

Just putting this out here since this is the top result for the aforesaid query and also I was pretty confused for quite some time * Derp * 只是将其放在此处，因为这是上述查询的最佳结果，而且我在相当长的一段时间内感到非常困惑* Derp *

asdfgh0077

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何在Flexbox中垂直对齐文本？

I would like to use flexbox to vertically align some content inside an <li> but not having gr
复制链接

扫一扫

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

#1楼

#2楼

#3楼

Edit: Please use Michael_B's answer instead of mine. 编辑：请使用Michael_B的答案代替我的答案 。

#4楼

#5楼

#6楼

“相关推荐”对你有帮助么？

Edit: Please use Michael_B's answer instead of mine. 编辑：请使用Michael_B的答案代替我的答案。