how to center a list in css code example

Example 1: css ul to center

ul {
  justify-content: center;
  display: flex;
}

Example 2: centering a list

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

<style>
    div {
        text-align: center;
    }
    ul {
        display: inline-block;
        text-align: left;
    }
</style>

Example 3: center li in ul css

.list-wrapper {
   text-align: -webkit-center;
}
.list-wrapper ul {
    display:block;
}

Example 4: how to center a list in html

/* Either center the list directly or center the parent element */

ul {
 text-align: center;
}

/* OR */

div .list {
 text-align: center;
}

Example 5: how to align list to the centre in css

<ul class="text-center" style="list-style-position: inside">
    <li>Born</li>
</ul>

Example 6: how to align list to the centre in css

<div id="menu-centered">
     <ul>
          <li><a href="">My first item</a></li>
          <li><a href="">My second item</a></li>
          <li><a href="">My third item</a></li>
          <li><a href="">My fourth item</a></li>
          <li><a href="">My fifth item</a></li>
     </ul>
</div>

Tags:

Css Example