[英]vertically align text and buttons
I wanted to center both the buttons and the text vertically, but the text as seen in the photo 我想同时将按钮和文字居中对齐,但文字如照片中所示
is lower than the rest. 低于其余的。 If I remove the buttons, the text goes to center as it should, but if I leave the buttons, the text goes back down (How i wish it was).
如果我删除按钮,则文本将居中居中,但是如果我离开按钮,则文本将退回(我希望的样子)。
.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 to the rescue. flexbox进行救援。
Just add: 只需添加:
display: flex;
align-items: center;
IE: 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>
Try to take your text in <span id ='foo'> Your text here </span>
尝试在
<span id ='foo'> Your text here </span>
And then you can edit it as you want to in your CSS. 然后,您可以根据需要在CSS中对其进行编辑。
A nice guide that I can suggest for centering the items with CSS ; 我可以建议一个很好的指南,以CSS为中心;
https://css-tricks.com/centering-css-complete-guide/ https://css-tricks.com/centering-css-complete-guide/
One way that would work is to use flexbox: 一种可行的方法是使用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>
Try this out for your CSS: 为您的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;
}
and add the following to a class associated with your buttons: 并将以下内容添加到与按钮关联的类中:
.buttonClass{
vertical-align:middle;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.