垂直对齐文本和按钮
问题描述:
我想这两个中心的按钮和文本垂直,但文本作为照片垂直对齐文本和按钮
看到的是比其他人低。如果我删除按钮,文本应该中心,但如果我离开的按钮,文本回落(我多么希望它)。
.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>
答
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>
答
尝试把你的文字<span id ='foo'> Your text here </span>
然后你就可以编辑它,只要你想在你的CSS。
一个很好的指南,我可以建议用CSS居中项目;将工作
答
一种方法是使用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>
答
试试这个出你的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;
}
它的工作很好,我可以在哪里找到一些有关flexbox的帮助/参考?我从来没有听说过。 – MONS7ER
[这](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)是一个很好的教程,请注意,它不完全支持IE浏览器 Daniel