CODEWITHSUNDEEP
htmlcss
anwesh mohapatra
anwesh mohapatra

Reputation: 1073

How to keep icons aligned strictly inside div?

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">&#9776;</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?

Upvotes: 0

Views: 2039

Answers (3)

hungerstar
hungerstar

Reputation: 21685

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">&#9776;</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>

Upvotes: 0

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92377

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

Upvotes: 0

Marek Sapiński
Marek Sapiński

Reputation: 138

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;
}

Upvotes: 2

Related Questions