带有Flexbox列表项目的标签上的垂直对齐

Question

我在某些列表框中有一些可变长度的文本，这会导致由于标签内文本不垂直对齐而导致不匹配。

我已经尝试过各种柔性箱选项以及标准的垂直对齐也无济于事。

任何想法如何将文本置于Flexbox中的a标签中？我已经将Inspect Element的CSS元素添加到Plunker中，所以不会有相关的内容，但您会明白。 https://plnkr.co/edit/EAwV0OtXg7Z8mSsHQoho?p=preview

.mobile-buttons > ul.side-list { 
 
    display:flex; 
 
    justify-content: space-around; 
 
    align-self:center; 
 
    flex-wrap:wrap; 
 
    text-align: center; 
 
    list-style: none; 
 
    margin-left: 0; 
 
    margin-bottom: 1.938em; 
 
    margin: 0.937em 0 0.937em 0; 
 
} 
 

 
.mobile-buttons > ul.side-list li { 
 
    display: inline-flex; 
 
    background: none; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 0.913em; 
 
    line-height: 1.538; 
 
} 
 

 
.mobile-buttons .blue-bg { 
 
    margin-bottom: 10px; 
 
    max-width: 150px; 
 
    min-height: 17px; 
 
    min-width: 150px; 
 
    font-size: 1em; 
 
    min-height: 17px; 
 
    height: 40px; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    display: inline-block; 
 
    min-height: 17px; 
 
    padding: 27px 2px 27px; 
 
    text-align: center; 
 
    color: #fff; 
 
    line-height: 1.15em; 
 
    top: 1px; 
 
    position: relative; 
 
    -moz-border-radius: 4px; 
 
    -webkit-border-radius: 4px; 
 
    border-radius: 4px; 
 
} 
 

 
.btn, a.btn { 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    display: inline-block; 
 
    min-height: 17px; 
 
    max-width: 180px; 
 
    min-width: 180px; 
 
    padding: 27px 2px 27px; 
 
    text-align: center; 
 
    color: #fff; 
 
    line-height: 1.15em; 
 
    top: 1px; 
 
    position: relative; 
 
    -moz-border-radius: 4px; 
 
    -webkit-border-radius: 4px; 
 
    border-radius: 4px; 
 
} 
 

 
.blue-bg { 
 
    border: #1D5FD5 1px solid; 
 
    text-shadow: #0a39c2 0 1px 0; 
 
    box-shadow: inset 0px 1px 1px 0px #8aa2e2, 0px 1px 2px 0 #696b6b; 
 
    background: linear-gradient(to bottom, #4089e9 0%,#1d5fd5 100%); 
 
}

<section class="mobile-buttons lines-bg clearfix row"> 
 
    <ul class="side-list"> 
 
    <li><a href="/link1" class="btn blue-bg">The First Menu</a></li> 
 
    <li><a href="/link2" class="btn blue-bg">Long Description on Second Menu</a></li> 
 
    <li><a href="/link3" class="btn blue-bg">Short 3rd Menu</a></li> 
 
    <li><a href="/link4" class="btn blue-bg">Extra description on fourth menu option</a></li> 
 
    </ul> 
 
</section>

Answer 1

可以在.mobile-buttons .blue-bg使用display:flex：

.mobile-buttons > ul.side-list { 
 
    display:flex; 
 
    justify-content: space-around; 
 
    align-self:center; 
 
    flex-wrap:wrap; 
 
    text-align: center; 
 
    list-style: none; 
 
    margin-left: 0; 
 
    margin-bottom: 1.938em; 
 
    margin: 0.937em 0 0.937em 0; 
 
} 
 

 
.mobile-buttons > ul.side-list li { 
 
    display: inline-flex; 
 
    background: none; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 0.913em; 
 
    line-height: 1.538; 
 
} 
 

 
.mobile-buttons .blue-bg { 
 
    margin-bottom: 10px; 
 
    max-width: 150px; 
 
    min-height: 17px; 
 
    min-width: 150px; 
 
    font-size: 1em; 
 
    min-height: 17px; 
 
    height: 40px; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    min-height: 17px; 
 
    padding: 27px 2px 27px; 
 
    text-align: center; 
 
    color: #fff; 
 
    line-height: 1.15em; 
 
    top: 1px; 
 
    position: relative; 
 
    -moz-border-radius: 4px; 
 
    -webkit-border-radius: 4px; 
 
    border-radius: 4px; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.btn, a.btn { 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    display: inline-block; 
 
    min-height: 17px; 
 
    max-width: 180px; 
 
    min-width: 180px; 
 
    padding: 27px 2px 27px; 
 
    text-align: center; 
 
    color: #fff; 
 
    line-height: 1.15em; 
 
    top: 1px; 
 
    position: relative; 
 
    -moz-border-radius: 4px; 
 
    -webkit-border-radius: 4px; 
 
    border-radius: 4px; 
 
} 
 
.blue-bg { 
 
    border: #1D5FD5 1px solid; 
 
    text-shadow: #0a39c2 0 1px 0; 
 
    box-shadow: inset 0px 1px 1px 0px #8aa2e2, 0px 1px 2px 0 #696b6b; 
 
    background: linear-gradient(to bottom, #4089e9 0%,#1d5fd5 100%); 
 
}

<section class="mobile-buttons lines-bg clearfix row"> 
 
    <ul class="side-list"> 
 
    \t <li><a href="/link1" class="btn blue-bg">The First Menu</a></li> 
 
    \t <li><a href="/link2" class="btn blue-bg">Long Description on Second Menu</a></li> 
 
    \t <li><a href="/link3" class="btn blue-bg">Short 3rd Menu</a></li> 
 
    \t <li><a href="/link4" class="btn blue-bg">Extra description on fourth menu option</a></li> 
 
    </ul> 
 
</section>

Answer 2

很多不必要的代码和重复。请重写为以下内容。与Flexbox的列表项标签 垂直对齐可以通过使用CSS Flexbox

这是实现来完成设置

.mobile-buttons .blue-bg { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.mobile-buttons>ul.side-list { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    flex-wrap: wrap; 
 
    list-style: none; 
 
    margin: 0.937em 1.938em 0; 
 
} 
 

 
.mobile-buttons>ul.side-list li { 
 
    font-size: 0.913em; 
 
    line-height: 1.538; 
 
} 
 

 
.mobile-buttons .btn { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    margin-bottom: 10px; 
 
    max-width: 150px; 
 
    min-width: 150px; 
 
    min-height: 17px; 
 
    height: 40px; 
 
    padding: 27px 2px 27px; 
 
} 
 

 
.mobile-buttons .blue-bg { 
 
    font-size: 1em; 
 
    font-weight: bold; 
 
    color: #fff; 
 
    line-height: 1.15em; 
 
    -moz-border-radius: 4px; 
 
    -webkit-border-radius: 4px; 
 
    border-radius: 4px; 
 
    border: #1D5FD5 1px solid; 
 
    text-shadow: #0a39c2 0 1px 0; 
 
    box-shadow: inset 0px 1px 1px 0px #8aa2e2, 0px 1px 2px 0 #696b6b; 
 
    background: linear-gradient(to bottom, #4089e9 0%, #1d5fd5 100%); 
 
} 
 

 
.btn, 
 
a.btn { 
 
    text-decoration: none; 
 
    text-align: center; 
 
}

<section class="mobile-buttons lines-bg clearfix row"> 
 
    <ul class="side-list"> 
 
    <li><a href="/link1" class="btn blue-bg">The First Menu</a></li> 
 
    <li><a href="/link2" class="btn blue-bg">Long Description on Second Menu</a></li> 
 
    <li><a href="/link3" class="btn blue-bg">Short 3rd Menu</a></li> 
 
    <li><a href="/link4" class="btn blue-bg">Extra description on fourth menu option</a></li> 
 
    </ul> 
 
</section>