为什么我的<span>不会垂直居中？

Question

我已经尝试了所有的东西，但似乎这个范围不会做任何我告诉它的事情。没有应用的属性会改变其垂直位置，但水平属性会改变。

我已遵循本指南中的所有建议：https://css-tricks.com/centering-css-complete-guide/

代码：

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

即使是顶部或底部边距和填充也根本不会影响它......但边缘边缘会...

这里有什么问题，为什么这个menu-join-button有自己的想法？如何将跨度居中于绿色标题？

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方式：

* {
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>