html - 如何对齐侧边栏中的图标

Question

我在边栏中有以下菜单项，但图标不会垂直对齐，例如，Cakes 项未与其他项对齐....我怎样才能让它们全部对齐？

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