Align html list in one line and in center of page horizontally

Use diplay:flex on both wrapper div and ul element and set margin-right and margin-left to auto at the list level:

.identity-providers-list {
  display: flex;
  ul {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    list-style: none;
    li {
      margin-right: 2rem;
    }
  }
}

Usage example

  <div class="identity-providers-list">
    <ul>
      <li>
        <i class="fab fa-github"></i> Github
      </li>
      <li>
        <i class="fab fa-google"></i> Google
      </li>
      <li>
        <i class="fab fa-gitlab"></i> Gitlab
      </li>
      <li>
        <i class="fab fa-stack-overflow"></i> StackOverflow
      </li>
    </ul>
  </div>

You can see how it looks in the register page on Codever


Shared with from Codever.land. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Subscribe to our newsletter for more code resources and news

Adrian Matei

Adrian Matei
Life force expressing itself as a coding capable human being