html - 垂直对齐文本和按钮

Question

我想将按钮和文本都垂直居中，但是照片中的文本却显示为

低于其余部分。如果我删除按钮，文本会按原样居中，但如果我离开按钮，文本会回到下方(我多么希望它是这样)。

.song {
  /*DivButtonTitle*/
  margin-bottom: 3px;
  color: #551A8B;
  font-size: 35px;
  font-family: 'flat';
  height: 80px;
  border-top: solid 1px #551A8B;
  border-bottom: solid 1px #551A8B;
  width: 100%;
  line-height: 80px;
  padding: 0px;
}

<div class="song">
  <button class="start" id="1" name="Gentleman-GUE/01._T_Apposto.mp3" onclick="togglePlay(this.id, this.name)"></button>
  <button class="restart" onclick="toggleRestart()"></button>
  <a>T'Apposto</a>
</div>

Answer 1

flexbox 来拯救。

只需添加:

  display: flex;
  align-items: center;

即:

.song {
  /*DivButtonTitle*/
  margin-bottom: 3px;
  color: #551A8B;
  font-size: 35px;
  font-family: 'flat';
  height: 80px;
  border-top: solid 1px #551A8B;
  border-bottom: solid 1px #551A8B;
  width: 100%;
  line-height: 80px;
  padding: 0px;
  display: flex;
  align-items: center;
}

<div class="song">
  <button class="start" id="1" name="Gentleman-GUE/01._T_Apposto.mp3" onclick="togglePlay(this.id, this.name)">start</button>
  <button class="restart" onclick="toggleRestart()">restart</button>
  <a>T'Apposto</a>
</div>