vertically align text and buttons - html

Question

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>

Answer 1

flexbox to the rescue.
Just add:
display: flex;
align-items: center;
I.E:
.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

Try to take your text in <span id ='foo'> Your text here </span>
And then you can edit it as you want to in your CSS.
A nice guide that I can suggest for centering the items with CSS ;
https://css-tricks.com/centering-css-complete-guide/

Answer 3

Try this out for your 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;
}

Answer 4

One way that would work is to use 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>