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.
👉 Use the Copy to mine
functionality to copy this snippet to your own personal collection and easy manage
your code snippets.
Codever is open source on Github ⭐🙏
