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 (aka adixchen)

Adrian Matei (aka adixchen)
Life force expressing itself as a coding capable human being

Dynamically expand angular material panel when condition met

Dynamically expand angular material panel when condition met code snippet Continue reading

Copy to clipboard with angular material

Published on October 12, 2022