blocks|key|81736|text|您可以将ul和li显示更改为table和table-cell。然后，vertical-align将为您工作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|81737|ul+{
++++height:+20%25;
++++width:+100%25;
++++display:+table;
}

li+{
++++display:+table-cell;
++++text-align:+center;
++++vertical-align:+middle;
++++background:+silver;
++++width:+100%25;+
}|code-block|syntax|javascript|81738|http://codepen.io/anon/pen/pckvK|81739|entityMap|0|LINK|mutability|MUTABLE|url^0|4|2|7|2|E|5|K|A|Y|E|0|0|0|W|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|M|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|L]]]]

<p>You could change the <code>ul</code> and <code>li</code> displays to <code>table</code> and <code>table-cell</code>. Then, <code>vertical-align</code> would work for you:</p>

<pre class="lang-css prettyprint-override"><code>ul {
    height: 20%;
    width: 100%;
    display: table;
}

li {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: silver;
    width: 100%; 
}
</code></pre>

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


blocks|key|4588195|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4588196|*+{
++padding:+0;
++margin:+0;
}
html,+body+{
++height:+100%25;
}
ul+{
++height:+100%25;
}
li+{
++display:+flex;
++justify-content:+center;
++align-items:center;
++background:+silver;
++width:+100%25;
++height:+20%25;
}|code-block|syntax|javascript|4588197|<ul>
++<li>This+is+the+text</li>
</ul>|4588198|4588199|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  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%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li&gt;This is the text&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


blocks|key|81768|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|81769|*+{
++padding:+0;
++margin:+0;
}

html,
body+{
++height:+100%25;
}

ul+{
++height:+100%25;
}

li+{
+display:+flex;
+justify-content:+center;
+align-items:+center;
+background:+silver;
+width:+100%25;
+height:+20%25;
}|code-block|syntax|javascript|81770|<ul>
++<li>This+is+the+text</li>
</ul>|81771|81772|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  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%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li&gt;This is the text&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4588235|text|使用display:+flex可以控制HTML元素的垂直对齐方式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4588236|​|4588237|.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;
}|code-block|syntax|javascript|4588238|<div+class="box">
++<div>Hello</div>
++<p>World</p>
</div>|4588239|4588240|entityMap^0|2|D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>Using <code>display: flex</code> you can control the vertical alignment of HTML elements.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
  &lt;div&gt;Hello&lt;/div&gt;
  &lt;p&gt;World&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4588254|text|这取决于你的li的高度，再说一句就行高|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4588255|​|4588256|*+{
++padding:+0;
++margin:+0;
}

html,
body+{
++height:+100%25;
}

ul+{
++height:+100%25;
}

li+{
++display:+flex;
++justify-content:+center;
++align-self:+center;
++background:+silver;
++width:+100%25;
++height:50px;line-height:50px;
}|code-block|syntax|javascript|4588257|<ul>
++<li>This+is+the+text</li>
</ul>|4588258|4588259|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>It's depend on your li height just call one more thing line height</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li&gt;This is the text&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4588274|text|将li中的显示设置为flex，并将align-items设置为center。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4588275|li+{
++display:+flex;

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

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

}|code-block|syntax|javascript|4588276|我个人也会针对伪元素并使用border-box+(Universal+selector+*+and+pseudo+elements)|4588277|*,
*::before,
*::after+{
++padding:+0;
++margin:+0;
++box-sizing:+border-box;
}|4588278|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/24794545/universal-selector-and-pseudo-elements^0|1|2|H|B|V|6|0|0|D|A|P|14|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@$9|17|A|18|1|19]]|E|$]]|$1|M|3|N|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>Set the display in <code>li</code> as flex and set <code>align-items</code> to <code>center</code>.</p>
<pre><code>li {
  display: flex;

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

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

}
</code></pre>
<p>I, personally, would also target pseudo elements and use <code>border-box</code>
(<a href="https://stackoverflow.com/questions/24794545/universal-selector-and-pseudo-elements">Universal selector * and pseudo elements</a>)</p>
<pre><code>*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
  
</code></pre>


blocks|key|81873|text|Align-self不会将li中的项对齐。相反，它将li作为一个整体对齐。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|81874|使用align-items将对li中的文本进行标记。看看这段代码。它起作用了。|81875|*+{
++padding:+0;
++margin:+0;
}

html,
body+{
++height:+100%25;
}

ul+{
++height:+100%25;
}

li+{
++display:+flex;
++justify-content:+center;
++align-items:+center;
++background:+silver;
++width:+100%25;
++height:+20%25;
}|code-block|syntax|javascript|81876|<ul>
++<li>This+is+the+text</li>
</ul>|81877|​|81878|entityMap^0|0|A|0|2|B|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|6|7|10|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

<p><code>Align-self</code> does not align the items inside the li. Instead it aligns the li as a whole.</p>
<p>Using <code>align-items</code> would aling the text inside the li.
Check out this code. It works.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  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%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li&gt;This is the text&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


<p>I would like to use flexbox to vertically align some content inside an <code>&lt;li&gt;</code> but not having great success.</p>

<p>I've checked online and many of the tutorials actually use a wrapper div which gets the <code>align-items:center</code> from the flex settings on the parent, but I'm wondering is it possible to cut out this additional element? </p>

<p>I've opted to use flexbox in this instance as the list item height will be a dynamic <code>%</code>. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  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%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li&gt;This is the text&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


How to vertically align text inside a flexbox?

我想使用flexbox在<li>中垂直对齐一些内容，但效果不是很好。我在网上查过了，许多教程实际上使用了一个包装器div，它从父组件的flex设置中获取align-items:center，但我想知道是否有可能去掉这个额外的元素？在这种情况下，我选择使用flexbox，因为列表项高度将是一个动态%。​* {  padd...

问如何在flexbox中垂直对齐文本？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在flexbox中垂直对齐文本？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在flexbox中垂直对齐文本？
EN