2017-08-30 138 views
0

我想这两个中心的按钮和文本垂直,但文本作为照片垂直对齐文本和按钮

enter image description here

看到的是比其他人低。如果我删除按钮,文本应该中心,但如果我离开的按钮,文本回落(我多么希望它)。

enter image description here

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

回答

0

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>

+0

它的工作很好,我可以在哪里找到一些有关flexbox的帮助/参考?我从来没有听说过。 – MONS7ER

+0

[这](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)是一个很好的教程,请注意,它不完全支持IE浏览器<11 – Daniel

0

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

+0

这也很好,但什么“证明 - 内容:flex-start;”意思? – MONS7ER

+0

哦,它已经过时了。它会告诉它水平对齐的位置。无论如何,位初始值是flex-start :) – lumio

0

试试这个出你的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; 
}