I would like to use flexbox to vertically align some content inside an <li>
but not having great success.
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?
I've opted to use flexbox in this instance as the list item height will be a dynamic %
.
* {_x000D_
padding: 0;_x000D_
margin: 0;_x000D_
}_x000D_
_x000D_
html,_x000D_
body {_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
ul {_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
li {_x000D_
display: flex;_x000D_
justify-content: center;_x000D_
align-self: center;_x000D_
background: silver;_x000D_
width: 100%;_x000D_
height: 20%;_x000D_
}
_x000D_
<ul>_x000D_
<li>This is the text</li>_x000D_
</ul>
_x000D_
* {_x000D_
padding: 0;_x000D_
margin: 0;_x000D_
}_x000D_
_x000D_
html,_x000D_
body {_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
ul {_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
li {_x000D_
display: flex;_x000D_
justify-content: center;_x000D_
align-items: center;_x000D_
background: silver;_x000D_
width: 100%;_x000D_
height: 20%;_x000D_
}
_x000D_
<ul>_x000D_
<li>This is the text</li>_x000D_
</ul>
_x000D_
RESULT
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-items
instead of align-self
and I also added flex-direction
to 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%;
}
Set the display in li
as flex and set align-items
to center
.
li {
display: flex;
/* Align items vertically */
align-items: center;
/* Align items horizontally */
justify-content: center;
}
I, personally, would also target pseudo elements and use border-box
(Universal selector * and pseudo elements)
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
* {_x000D_
padding: 0;_x000D_
margin: 0;_x000D_
}_x000D_
html, body {_x000D_
height: 100%;_x000D_
}_x000D_
ul {_x000D_
height: 100%;_x000D_
}_x000D_
li {_x000D_
display: flex;_x000D_
justify-content: center;_x000D_
align-items:center;_x000D_
background: silver;_x000D_
width: 100%;_x000D_
height: 20%;_x000D_
}
_x000D_
<ul>_x000D_
<li>This is the text</li>_x000D_
</ul>
_x000D_
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.
// 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;
}
It's depend on your li height just call one more thing line height
* {
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;
}
_x000D_
<ul>
<li>This is the text</li>
</ul>
_x000D_
Using display: flex
you can control the vertical alignment of HTML elements.
.box {_x000D_
height: 100px;_x000D_
display: flex;_x000D_
align-items: center; /* Vertical */_x000D_
justify-content: center; /* Horizontal */_x000D_
border:2px solid black;_x000D_
}_x000D_
_x000D_
.box div {_x000D_
width: 100px;_x000D_
height: 20px;_x000D_
border:1px solid;_x000D_
}
_x000D_
<div class="box">_x000D_
<div>Hello</div>_x000D_
<p>World</p>_x000D_
</div>
_x000D_
You could change the ul
and li
displays to table
and table-cell
. Then, vertical-align
would work for you:
ul {
height: 20%;
width: 100%;
display: table;
}
li {
display: table-cell;
text-align: center;
vertical-align: middle;
background: silver;
width: 100%;
}
The most voted answer is for solving this specific problem posted by OP, where the content (text) was being wrapped inside an inline-block
element. 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:
align-self: center;
Instead of using align-self: center
use align-items: center
.
There's no need to change flex-direction
or use 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. Except your li
is not a flex item because its parent – the ul
– does not have display: flex
or display: inline-flex
applied.
Therefore, the ul
is not a flex container, the li
is not a flex item, and align-self
has no effect.
The align-items
property is similar to align-self
, except it applies to flex containers.
Since the li
is a flex container, align-items
can be used to vertically center the child elements.
* {_x000D_
padding: 0;_x000D_
margin: 0;_x000D_
}_x000D_
html, body {_x000D_
height: 100%;_x000D_
}_x000D_
ul {_x000D_
height: 100%;_x000D_
}_x000D_
li {_x000D_
display: flex;_x000D_
justify-content: center;_x000D_
/* align-self: center; */_x000D_
align-items: center;_x000D_
background: silver;_x000D_
width: 100%;_x000D_
height: 20%;_x000D_
}
_x000D_
<ul>_x000D_
<li>This is the text</li>_x000D_
</ul>
_x000D_
Technically, here's how align-items
and align-self
work...
The align-items
property (on the container) sets the default value of align-self
(on the items). Therefore, align-items: center
means all flex items will be set to align-self: center
.
But you can override this default by adjusting the align-self
on individual items.
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
.
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
.
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:
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.
The flexbox specification provides for similar behavior.
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.
Hence, the text in the li
is a flex item.
Source: Stackoverflow.com