html - 为什么我的中心不垂直？

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会有自己的想法？如何在那个绿色标题中居中跨度？

标签： htmlcss

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>

弹性方式：

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