Question

我是CSS和HTML的新手，所以我陷入了一个非常愚蠢的步骤。问题是fa-list-ul图标定位错误。没有text-align:center它的位置很好。有什么办法解决吗？感谢您花时间解决我的问题。

这是我的代码：

.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 1

使用display: flex将使该容器内的每个元素具有相同的水平大小，因此这可以解决您的问题：

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

这里也是jsfiddle：https://jsfiddle.net/fqkvv8es/3/

Answer 2

您可以使用Bootstrap的类，这样可以减少所选答案使用的代码：

JSFiddle

HTML

<nav class="player">
  <div class="container">
    <div class="row justify-content-between align-items-center">
      <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;Station</span>
      </div>
      <i class="fa fa-list-ul radio_select action"></i>
    </div>
  </div>
</nav>

CSS

.player {
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  line-height: 36px
}

.player_play {
  font-size: 36px;
}

.radio_icon {
  padding-right: 5px;
}

.radio_select {
  font-size: 20px;
}

JSFiddle

Bootstrap图标定位错误

2 个答案: