html - 为什么我的 <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

垂直对齐中间方式:

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