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

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}

<nav class="player">
<div class="container">
<div class="float-left">
<i class="fa fa-play-circle player_play action"></i>
<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 class="float-right">
<i class="fa fa-list-ul radio_select action"></i>

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:

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