如何在侧边栏中对齐图标

Question

我在侧边栏中有以下菜单项，但图标不会垂直对齐，例如，项目蛋糕未与其他对齐....我如何获得它们全部对齐？

#menu .menu-item { 
 
    border-bottom: 1px solid #D5D8D9; 
 
    padding: 15px 0px; 
 
    color: #6B6A72; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
} 
 

 
#menu .menu-item i { 
 
    margin-right: 20px; 
 
} 
 

 
#menu .menu-item a { 
 
    text-decoration: none; 
 
    color: #6B6A72; 
 
    font-size: 1.5rem; 
 
} 
 

 
#menu .menu-item:hover, #menu .menu-item-active { 
 
    border-right: 5px solid #45B29D; 
 
    color: #45B29D; 
 
    cursor: pointer; 
 
} 
 

 
#menu .menu-item:hover { 
 
    opacity: 0.7; 
 
} 
 

 
#menu .menu-item:hover a, #menu .menu-item-active a { 
 
    color: #45B29D; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div id="menu" class="section"> 
 
       <div class="menu-item"><a href="index.html"><span class="fa fa-dashboard"></span> Orders</a></div> 
 
       <div class="menu-item"><a href="#"><span class="fa fa-birthday-cake"></span> Cakes</a></div> 
 
       <div class="menu-item"><a href="login.html"><span class="fa fa-sign-out"></span> Signout</a></div> 
 
      </div>

Answer 1

这是如何用CSS对齐图像：

#menu .menu-item { 
 
    border-bottom: 1px solid #D5D8D9; 
 
    padding: 15px 0px; 
 
    color: #6B6A72; 
 

 

 

 
} 
 

 
#menu .menu-item i { 
 
    margin-right: 20px; 
 
} 
 

 
#menu .menu-item a { 
 
    text-decoration: none; 
 
    color: #6B6A72; 
 
    font-size: 1.5rem; 
 
    margin-left: 50%; 
 
} 
 

 
#menu .menu-item:hover, #menu .menu-item-active { 
 
    border-right: 5px solid #45B29D; 
 
    color: #45B29D; 
 
    cursor: pointer; 
 
} 
 

 
#menu .menu-item:hover { 
 
    opacity: 0.7; 
 
} 
 

 
#menu .menu-item:hover a, #menu .menu-item-active a { 
 
    color: #45B29D; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div id="menu" class="section"> 
 
       <div class="menu-item"><a href="index.html"><span class="fa fa-dashboard"></span> Orders</a></div> 
 
       <div class="menu-item"><a href="#"><span class="fa fa-birthday-cake"></span> Cakes</a></div> 
 
       <div class="menu-item"><a href="login.html"><span class="fa fa-sign-out"></span> Signout</a></div> 
 
      </div>

#menu .menu-item { 
    border-bottom: 1px solid #D5D8D9; 
    padding: 15px 0px; 
    color: #6B6A72; 



} 

#menu .menu-item i { 
    margin-right: 20px; 
} 

#menu .menu-item a { 
    text-decoration: none; 
    color: #6B6A72; 
    font-size: 1.5rem; 
    margin-left: 50%; 
} 

#menu .menu-item:hover, #menu .menu-item-active { 
    border-right: 5px solid #45B29D; 
    color: #45B29D; 
    cursor: pointer; 
} 

#menu .menu-item:hover { 
    opacity: 0.7; 
} 

#menu .menu-item:hover a, #menu .menu-item-active a { 
    color: #45B29D; 
}