Why won't my <span> center vertically? - html

Question

I've tried everything, but it seems like this span just won't do anything I tell it to. No applied properties change its vertical position, but horizontal properties do.
I've followed all the recommendations from this guide: https://css-tricks.com/centering-css-complete-guide/
Code:
#header{
height: 50px;
width: 100% - 50px;
padding: 0px 25px 0px 25px;
background-color: #00A680;
}
#header-right-icon-div > img{
height: 20px;
display: inline;
padding: 15px 10px 15px 10px;
}
#menu-join-button{
}
<div id="header">
<div id="header-right" style="float: right;">
<div id="header-right-icon-div">
<img src="briefcase_icon.svg" alt="">
<img src="notification_icon.svg" alt="">
<img src="profile_icon.svg" alt="">
<img src="search_icon.svg" alt="">
<span id="menu-join-button">hello</span>
</div>
</div>
</div>
Even top or bottom margins and padding don't affect it at all... but side margins do...
What is the issue here, why does this menu-join-button have a mind of it's own? How do I center the span in that green header?

Answer 1

Verticle align middle Way:
* {
box-sizing: border-box;
}
#header{
width: 100%;
padding: 0px 25px 0px 25px;
background-color: #00A680;
}
#header:after {
content: '';
display: table;
clear: both;
}
#header-right{
float:right;
padding: 10px 25px 10px 25px;
background-color: #00A680;
}
#header-right-icon-div > img{
display:inline-block;
vertical-align: middle;
padding: 0px 10px 0px 10px;
}
#menu-join-button{
}
<div id="header">
<div id="header-right">
<div id="header-right-icon-div">
<img src="http://via.placeholder.com/30x30" alt="">
<img src="http://via.placeholder.com/30x30" alt="">
<img src="http://via.placeholder.com/30x30" alt="">
<img src="http://via.placeholder.com/30x30" alt="">
<span id="menu-join-button">hello</span>
</div>
</div>
</div>
Flex Way:
* {
box-sizing: border-box;
}
#header{
width: 100%;
padding: 0px 25px 0px 25px;
background-color: #00A680;
display: flex;
justify-content: flex-end;
align-items:center;
}
#header-right{
padding: 10px 25px 10px 25px;
background-color: #00A680;
}
#header-right-icon-div {
display: flex;
align-items:center;
}
#header-right-icon-div > img{
padding: 0px 10px 0px 10px;
}
<div id="header">
<div id="header-right">
<div id="header-right-icon-div">
<img src="http://via.placeholder.com/30x30" alt="">
<img src="http://via.placeholder.com/30x30" alt="">
<img src="http://via.placeholder.com/30x30" alt="">
<img src="http://via.placeholder.com/30x30" alt="">
<span id="menu-join-button">hello</span>
</div>
</div>
</div>