垂直對齊文本和按鈕

我想這兩個中心的按鈕和文本垂直，但文本作爲照片垂直對齊文本和按鈕

看到的是比其他人低。如果我刪除按鈕，文本應該中心，但如果我離開的按鈕，文本回落（我多麼希望它）。

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

來源

2017-08-30 MONS7ER

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>

來源

2017-08-30 20:34:47 Daniel

它的工作很好，我可以在哪裏找到一些有關flexbox的幫助/參考？我從來沒有聽說過。 – MONS7ER

[這]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）是一個很好的教程，請注意，它不完全支持IE瀏覽器<11 – Daniel

嘗試把你的文字<span id ='foo'> Your text here </span>

然後你就可以編輯它，只要你想在你的CSS。

一個很好的指南，我可以建議用CSS居中項目;將工作

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

來源

2017-08-30 20:34:57 Atlas

一種方法是使用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>

來源

2017-08-30 20:35:07 lumio

這也很好，但什麼「證明 - 內容：flex-start;」意思？ – MONS7ER

哦，它已經過時了。它會告訴它水平對齊的位置。無論如何，位初始值是flex-start :) – lumio

試試這個出你的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; 
}

，並添加以下到一個類associa用你的按鈕：

.buttonClass{ 
vertical-align:middle; 
}

來源

2017-08-30 20:43:24 danglebot

垂直對齊文本和按鈕

回答

相關問題