How to keep icons aligned strictly inside div? - html

Question

I am making a sidebar and am new to css. I created a div which represents a closed sidebar. It is supposed to only show the icons. Unfortunately the icons come in a misaligned manner inside the div based on their size. How do I fix this?
.sidenav {
height: 492px;
width: 300px;
background-color: #db3d44;
}
.data-icon {
font-size: 45px;
color: black;
opacity: 0.5;
float: left;
margin-left: 9px;
margin-top: 5px;
margin-bottom: 10px;
}
.hamburger {
background-color: transparent;
border-color: transparent;
color: white;
margin-left: 10px;
margin-top: 4px;
font-size: 25px;
}
.hamburger:hover {
color: black;
}
.sidenav-closed {
width: 65px;
float: left;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="sidenav-closed sidenav">
<button class="hamburger data-disappear">☰</button>
<div class="icons-only">
<div class="data-icon">
<i class="fa fa-home"></i>
</div>
<div class="data-icon">
<i class="fa fa-car"></i>
</div>
<div class="data-icon">
<i class="fa fa-home"></i>
</div>
</div>
</div>
The car icon is misaligned here. What's the solution?

Answer 1

You could try to align all the icons to the center so your .data-icon class could look like this:
.data-icon {
font-size: 45px;
color: black;
opacity: 0.5;
display: block;
width: 100%;
text-align: center;
}

Answer 2

Your div elements doesn't have set width and height in CSS - so the icons are strictly aligned inside them.
If you want to vertically center them and learn something new use flexbox:
.icons-only {
display: flex;
flex-direction: column;
align-items: center;
}
and
.data-icon {
...
margin-left:0
}
Your car icon is also a little bit bigger than house - you can a little change it size by add new class to it or use this:
.data-icon:nth-child(2) {
font-size: 40px;
}
This CSS code will take second (=2) element with class .data-icon and set different font size for it

Answer 3

The icons are inline elements so they will be left aligned by default. Add in that the icons are not that same size (this is normal), you get an uneven alignment.
To remedy this, add text-align: center to .icons-only.
Note: Given the layout in the example, it does not appear necessary to float .data-icon to the left.
.sidenav {
height: 492px;
width: 300px;
background-color: #db3d44;
}
.icons-only {
text-align: center;
}
.data-icon {
color: rgba( 0, 0, 0, 0.5 );
font-size: 45px;
}
.hamburger {
background-color: transparent;
border-color: transparent;
color: white;
margin-left: 10px;
margin-top: 4px;
font-size: 25px;
}
.hamburger:hover {
color: black;
}
.sidenav-closed {
width: 65px;
float: left;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="sidenav-closed sidenav">
<button class="hamburger data-disappear">☰</button>
<div class="icons-only">
<div class="data-icon">
<i class="fa fa-home"></i>
</div>
<div class="data-icon">
<i class="fa fa-car"></i>
</div>
<div class="data-icon">
<i class="fa fa-home"></i>
</div>
</div>
</div>