Center html ul completely in container

Question

I have this unordered list and I want to display it vertically and also make it completely centered inside the parent container. I've managed to make it display vertically and be centered on the x-axis, but not on the y-axis. "vertical-alignment: middle;" doesn't seem to do what I want.

Consider this html-code:

div {
  margin: auto;
  width: 90%;
  height: 200px;
  background-color: lightblue;
}

ul {
  list-style: none;
  height: 100%;
  width: 100;
  padding: 0;
  text-align: center
}

ul li {
  display: inline;
  margin-right: 20px;
  vertical-align: middle;
}

<div>
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
  </ul>
</div>

I think you mean horizontally when you say vertically. Also, `width: 100;` is invalid. Needs a unit — j08691, Sep 06 '19 at 17:22
Possible duplicate of [Vertically center ul in div](https://stackoverflow.com/questions/16078868/vertically-center-ul-in-div) and a multitude of same questions found by searching SO. — Rob, Sep 06 '19 at 17:28

Amaresh S M · Accepted Answer · 2019-09-06T17:51:13.760

To vertically align on y-axis add the below given css to ul:

  display:flex;
  justify-content:center;
  align-items:center;

And remove width:100; from ul tag.

Demo

div {
  margin: auto;
  width: 90%;
  height: 200px;
  background-color: lightblue;
}

ul {
  list-style: none;
  height: 100%;
  padding: 0;
  display:flex;   /*add this */
  justify-content:center; /*add this */
  align-items:center; /*add this */
  
  text-align: center
}

ul li {
  display: inline;
  margin-right: 20px;
  vertical-align: middle;
}

<div>
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
  </ul>
</div>

Vivekraj K R · Answer 2 · 2019-09-17T08:57:10.650

1

You can use display: flex for the div and margin: auto for the ul. And remove height and width rules from ul. here's the working Fiddle

<div>
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
  </ul>
</div>

div {
    display: flex;
    margin: auto;
    width: 90%;
    height: 200px;
    background-color: lightblue;
}

ul {
    margin: auto;
    list-style: none;
    padding: 0;
    text-align: center
}

ul li {
    display: inline;
    margin-right: 20px;
    vertical-align: middle;
}

edited Sep 17 '19 at 08:57

answered Sep 06 '19 at 17:23

Vivekraj K R

2,418
2
19
38

Post your code in your question, not jsFiddle please – j08691 Sep 06 '19 at 17:24

score 0 · Answer 3 · answered Sep 06 '19 at 17:45

To align vertically u can use line-height. use line-height instead of height in div tag.

div {
  margin: auto;
  width: 90%;
  line-height: 200px;  /*change this */
  background-color: lightblue;
}

div {
  margin: auto;
  width: 90%;
  line-height: 200px;
  background-color: lightblue;
}

ul {
  list-style: none;
  height: 100%;
  padding: 0;
  text-align: center
}

ul li {
  display: inline;
  margin-right: 20px;
  vertical-align: middle;
}

<div>
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
  </ul>
</div>

I'd say its a bad practice of using line-height. Because we might need to override line-height of the paragraph/content comes under that parent div. — Vivekraj K R, Sep 19 '19 at 09:32

Center html ul completely in container

3 Answers3