0 votes
1 view
in Web Technology by (22.4k points)

I would like to use flexbox to vertically align some content inside a <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>

1 Answer

0 votes
by (40.3k points)

If you want to make the flex-direction vertical (using column) then justify-content: center which will center it vertically. Now, you can just use the text-align: center to center horizontally as well like this:

li {

  display: flex;

  justify-content: center;

  flex-direction: column;

  text-align: center;

}

Have a look at this demo:

https://codepen.io/anon/pen/Fkhgo

Related questions

Welcome to Intellipaat Community. Get your technical queries answered by top developers !


Categories

...