I have a problem with positioning and centering the round shape in the horizontal list cell.
I've a class for my cicrle:
.user-logo {
background-color: #4CAF50;
border: none;
border-radius: 50%;
height: 50px;
width: 50px;
text-align: center;
}
And class for the list:
.navbar-list {
@extend ul;
height: $navbar-height;
float: right;
li {
float:left;
}
a {
display: block;
margin: 0 auto;
padding-left: 5px;
padding-right: 5px;
}
li a:hover {
background-color: #111;
}
}
I'm working with react so class usage looks like this:
<ul className='navbar-list'>
<li><NavLink to='/'>New Project</NavLink></li>
<li><NavLink to='/'>Log Out</NavLink></li>
<li><NavLink to='/' className='user-logo'>NN</NavLink></li>
</ul>
How can I adjust the position of my circular shape inside a cell? For now, the text of my Navbar is well displayed - in the middle of every cell (even the text for my circle), but my circle is still aligned to the upper left corner of the cell.
You can use below CSS code:
.user-logo {
background-color: #4caf50;
border: none;
border-radius: 50%;
height: 50px;
width: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.navbar-list {
height: 50px;
justify-content: flex-end;
display: flex;
align-items: center;
}
.navbar-list li {
list-style-type: none;
}
.navbar-list li a {
padding-left: 5px;
padding-right: 5px;
}
.navbar-list li a:hover {
background-color: #111;
}