Html 如何在 flexbox 内垂直对齐文本？

How to vertically align text inside a flexbox?

提问by styler

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:centerfrom the flex settings on the parent, but I'm wondering is it possible to cut out this additional element?

我在网上查过，许多教程实际上使用了一个包装 div，它align-items:center从父级的 flex 设置中获取，但我想知道是否可以删除这个额外的元素？

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>

回答by Michael Benjamin

Instead of using align-self: centeruse align-items: center.

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

There's no need to change flex-directionor use text-align.

无需更改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-selfproperty applies to flex items. Except your liis not a flex item because its parent – the ul– does not have display: flexor display: inline-flexapplied.

该align-self属性适用于flex items。除非您li的不是弹性项目，因为它的父项 – the ul– 没有display: flex或没有display: inline-flex应用。

Therefore, the ulis not a flex container, the liis not a flex item, and align-selfhas no effect.

因此，ul不是 flex 容器，li也不是 flex 项目，并且align-self没有效果。

The align-itemsproperty is similar to align-self, except it applies to flex containers.

该align-items属性类似于align-self，但它适用于flex 容器。

Since the liis a flex container, align-itemscan 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

代码笔演示

---

---

Technically, here's how align-itemsand align-selfwork...

从技术上讲，这里是如何align-items和align-self工作......

The align-itemsproperty (on the container) sets the default value of align-self(on the items). Therefore, align-items: centermeans all flex items will be set to align-self: center.

该align-items属性（在容器上）设置的默认值align-self（在项目）。因此，align-items: center意味着所有 flex 项目都将被设置为align-self: center。

But you can override this default by adjusting the align-selfon individual items.

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

For example, you may want equal height columns, so the container is set to align-items: stretch. However, one item must be pinned to the top, so it is set to align-self: flex-start.

例如，您可能需要等高的列，因此将容器设置为align-items: stretch。但是，必须将一项固定在顶部，因此将其设置为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 elementand child of the parent.

原因是未由内联级元素显式包装的文本在算法上由内联框包装。这使它成为匿名内联元素和父元素的子元素。

From the CSS spec:

来自 CSS 规范：

9.2.2.1 Anonymous inline boxes

Any text that is directly contained inside a block container element must be treated as an anonymous inline element.

9.2.2.1 匿名内联框

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

The flexbox specification provides for similar behavior.

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

4. Flex Items

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.

4. 弹性项目

flex 容器的每个流入子元素都成为一个 flex 项，并且直接包含在 flex 容器内的每个连续文本都被包裹在一个匿名的 flex 项中。

Hence, the text in the liis a flex item.

因此， 中的文本li是一个弹性项目。

回答by Mohd Abdul Mujib

The most voted answer is for solving this specific problemposted by OP, where the content (text) was being wrapped inside an inline-blockelement. Some cases may be about centering a normal element vertically inside a container, which also applied in my case, so for that all you need is:

投票最多的答案是解决OP 发布的这个特定问题，其中内容（文本）被包裹在一个inline-block元素中。有些情况可能是关于在容器内垂直居中一个普通元素，这也适用于我的情况，因此您只需要：

align-self: center;

回答by serraosays

The best move is to just nest a flexbox inside of a flexbox. All you have to do is give the child align-items: center. This will vertically align the text inside of its parent.

最好的做法是在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;
}

回答by Wilson

RESULT

结果

HTML

HTML

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

---

---

Use align-itemsinstead of align-selfand I also added flex-directionto column.

使用align-items代替，align-self我还添加flex-direction到column.

CSS

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%; 
}

回答by Anatoly Gorchuk

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

回答by Ankur prajapati

Using display: flexyou can control the vertical alignment of HTML elements.

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

.box {
  height: 100px;
  display: flex;
  align-items: center; /* Vertical */
  justify-content: center; /* Horizontal */
  border:2px solid black;
}

.box div {
  width: 100px;
  height: 20px;
  border:1px solid;
}

<div class="box">
  <div>Hello</div>
  <p>World</p>
</div>

回答by Swapnil

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

回答by LcSalazar

You could change the uland lidisplays to tableand table-cell. Then, vertical-alignwould work for you:

您可以将ul和li显示更改为table和table-cell。然后，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