How to vertically align text inside a flexbox?

Question

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

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

score 818 · Answer 1 · edited Dec 01 '22 at 20:38

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.

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

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.

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.

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.

Hence, the text in the li is a flex item.

I like `align-items: baseline`. Good for different heights coming from different unicode chars etc. — qräbnö, Jan 07 '19 at 16:50
Thanks for explaining and linking to the concept of Anonymous inline boxes... really helps clarify why some effects you can achieve by trial and error work the way they do. — squarecandy, Sep 23 '19 at 16:58

score 87 · Answer 2 · edited Dec 01 '22 at 20:43

87

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

edited Dec 01 '22 at 20:43

moffeltje

4,521
4
33
57

answered Oct 18 '18 at 05:41

serraosays

7,163
3
35
60

2

If you want a perfect centered text. `text-align:center` doesn't work alone. Use `align-items: center` with it. – Tzwenni Feb 26 '20 at 16:06
I guess if you give `align-items: center` to the parent having `display: flex` then it automatically gets applied to all it's child elements and so do not have to explicitly declare `align-items: center` for every child – Chandra Agarwala Jul 25 '20 at 17:46
1

@ChandraAgarwala - that's true but you also need to add another `display: flex; align-items: center;` for each child if you want to vertically center the contents of each child. – serraosays Aug 11 '20 at 15:21

score 56 · Answer 3 · edited Dec 09 '19 at 21:35

56

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;

edited Dec 09 '19 at 21:35

TylerH

20,799
66
75
101

answered Aug 21 '18 at 18:42

Mohd Abdul Mujib

13,071
8
64
88

score 38 · Answer 4 · edited May 27 '23 at 08:56

38

I will not write the answer because many people have already given the correct one. However, I want to show you a useful tool that can save you from such problems in the future.

In your browser's Dev Tools, you need to inspect an element with display: flex and click the icon shown in the screenshot.

You will then be presented with the option to select some properties for display: flex so you can easily check all options quickly, without knowing what you can use.

edited May 27 '23 at 08:56

mrwnt10

1,234
1
17
28

answered Aug 19 '21 at 06:25

Krzysztof Antosik

893
9
13

4

This is really useful, just as a note, it does not seem to be in firefox but in chrome. – nck Jan 04 '22 at 09:56
This is the most useful answer I've ever seen on SO! – Austin Mar 08 '23 at 04:22
There were probably more useful answers, but thank you! – Krzysztof Antosik Mar 08 '23 at 20:16

score 13 · Answer 5 · answered Dec 12 '19 at 13:23

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

score 11 · Answer 6 · answered Sep 04 '20 at 03:59

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

score 7 · Answer 7 · edited May 18 '20 at 06:16

7

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

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

edited May 18 '20 at 06:16

Lex

4,749
3
45
66

answered May 03 '20 at 11:13

Ankur prajapati

485
6
9

score 5 · Answer 8 · answered Aug 19 '21 at 06:05

Align-self does not align the items inside the li. Instead it aligns the li as a whole.

Using align-items would aling the text inside the li. Check out this code. It works.

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

score 4 · Answer 9 · answered Dec 18 '19 at 16:04

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

score 4 · Answer 10 · answered Jul 03 '20 at 18:22

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

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

score 4 · Answer 11 · edited Jun 23 '22 at 22:29

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

score -1 · Answer 12 · answered Feb 14 '18 at 09:27

-1

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

answered Feb 14 '18 at 09:27

Swapnil

39
1

Code-only answers are not very useful... add comments or an explanation of what you did, and why it works. – random_user_name Mar 01 '19 at 15:52

score -7 · Answer 13 · edited May 23 '19 at 21:55

-7

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

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

edited May 23 '19 at 21:55

Edzzn

45
7

answered Aug 14 '14 at 15:21

LcSalazar

16,524
3
37
69

Works well until you add another list item in there. – George Aug 14 '14 at 15:22
you've switched out the height to be on the ul instead of the li? each li height will be dynamic so this isnt something I could use im afraid – styler Aug 14 '14 at 15:24
@LcSalazar You wouldn't typically use a list if you only intended to have one item. That's what divs are for. – Ben Visness Aug 14 '14 at 15:38
2

True again... But I'm not saying this is the perfect scenario. I've just posted a solution that answers the question as it is. I hope this information might come handy to someone else that reads it and has another scenario... – LcSalazar Aug 14 '14 at 15:40
Also... the `display:table` / `display:table-cell` technique is usefull for most element's hierarchy... So, I agree it is not to be chosen as the correct answer, but I hope it helps someone. – LcSalazar Aug 14 '14 at 15:42

How to vertically align text inside a flexbox?

13 Answers13

Linked

Related