Yegor Gunko Yegor Gunko - 2 years ago 169
CSS Question

Bootstrap icon wrong positioning

I'm new to CSS and HTML, so I got stuck on a very stupid step. The thing is that fa-list-ul icon is wrong positioned. Without

text-align:center
it positions fine. Any way to fix it? Thanks for spending your time with my problem.

Here's the JSFiddle

And here is my code :


.player{padding:.75rem 1rem;margin-bottom:1rem;line-height:36px}
.player_play{font-size:36px;vertical-align:middle}
.radio_name{vertical-align:middle}
.radio_icon{padding-right:5px;vertical-align:middle}
.radio_select{font-size:20px;vertical-align:middle}


<nav class="player">
<div class="container">
<div class="float-left">
<i class="fa fa-play-circle player_play action"></i>
</div>
<div class="radio_volume">
<i class="fa fa-volume-down"></i>
<i class="fa fa-music radio_icon accent_color"></i><span class="radio_name">&nbsp;Anison</span>
</div>
<div class="float-right">
<i class="fa fa-list-ul radio_select action"></i>
</div>
</div>
</nav>

Answer Source

Using display: flex will make every element inside that container have the same vertical size so this should solve your problem:

.container {
  display: flex;
}
.float-left {
  flex: 1;
}
.radio_volume {
  text-align: center;
  flex: 1;
}
.float-right {
  flex: 1;
}
.float-right i {
  float: right;
  margin-top: 10px;
}

also here's the jsfiddle: https://jsfiddle.net/fqkvv8es/3/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download