垂直對齊文本和按鈕

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;

IE瀏覽器：

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

Answer 2

嘗試在<span id ='foo'> Your text here </span>

然后，您可以根據需要在CSS中對其進行編輯。

我可以建議一個很好的指南，以CSS為中心；

https://css-tricks.com/centering-css-complete-guide/

Answer 3

一種可行的方法是使用flexbox：

 .song { display: flex; align-items: center; 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%; padding: 0px; } .song button { margin-right: 10px } 

 <div class="song"> <button class="start"></button> <button class="restart"></button> <a>T'Apposto</a> </div> 

Answer 4

為您的CSS嘗試一下：

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

並將以下內容添加到與按鈕關聯的類中：

.buttonClass{
vertical-align:middle;
}