如何垂直对齐文本在一个flexbox?

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

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

在这个例子中，我选择使用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>

881836 次浏览
小开

您可以将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%;
}

< a href = " http://codepen。io/anon/pen/pckvK" rel="nofollow noreferrer">http://codepen.io/anon/pen/pckvK

小开

不要使用align-self: center，使用align-items: center。

不需要更改flex-direction或使用text-align。

下面是你的代码，只做了一个调整，就能让它全部工作:

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属性应用于flex项目。除了你的li不是一个伸缩项，因为它的父项- ul -没有应用display: flex或display: inline-flex。

因此，ul不是一个伸缩容器，li不是一个伸缩项目，align-self没有任何效果。

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

因为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>

< a href = " http://codepen。/a> . io/anon/pen/ORQELv" rel="nofollow noreferrer">代码依赖演示 . io/anon/pen/ORQELv" rel="nofollow noreferrer

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

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

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

例如，您可能希望等高列，因此容器被设置为align-items: stretch。但是，有一项必须固定在顶部，所以它被设置为align-self: flex-start。

< a href = " https://stackoverflow.com/q/33034660/3597276 " > < / >示例

文本如何是一个伸缩项目?< / >强

有些人可能会想，一连串的文字是如何…

<li>This is the text</li>

是li的子元素。

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

来自CSS规范:

9.2.2.1匿名inline 框< /强> < / > < / p >

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

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

Flex项目< /强> < / >

伸缩容器的每个流中子容器都成为伸缩项，并且每个子容器都是伸缩项 直接包含在伸缩件内的连续文本运行

.容器包装在一个匿名的伸缩项中

因此，li中的文本是一个伸缩项。

小开 

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

小开

投票最多的答案是解决OP发布的这个问题，其中内容(文本)被包装在inline-block元素中。有些情况下可能是关于容器内的一个普通元素垂直居中，这也适用于我的情况，所以你所需要的是:

align-self: center;
小开

最好的做法是巢一个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;
}
小开

结果

enter image description here

超文本标记语言

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

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

小开

使用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>

小开

这取决于你的身高，再叫一件事线高

* {
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:50px;line-height:50px;
}
<ul>
<li>This is the text</li>
</ul>

小开

将li中的显示设置为flex，并将align-items设置为center。

li {
display: flex;


/* Align items vertically */
align-items: center;


/* Align items horizontally */
justify-content: center;


}
我个人也会以伪元素为目标，并使用border-box (# EYZ0) < / p > 
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
小开

Align-self没有对齐li内的项目。相反，它将li作为一个整体对齐。

使用align-items将在li中读取文本。 检查这段代码。它的工作原理。 

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

小开

我不会写出答案，因为很多人已经给出了正确的答案。但是，我想要给你展示一个有用的工具，它可以让你在将来避免这样的问题。

在浏览器的Dev Tools中，你需要检查一个元素，打开display: flex，按屏幕截图中显示的图标。

enter image description here

然后，您将看到为display: flex选择一些属性的选项，以便您可以轻松地快速检查所有选项，而不知道您可以使用什么

小开 

.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>


提交答案