Vertikale Ausrichtung auf Tags mit Flexbox-Listenelementen

Question

Ich habe Text mit variabler Länge in einigen Listenfeldern. Dies führt dazu, dass der Text nicht stimmt, da der Text innerhalb eines Tags nicht vertikal ausgerichtet ist.

Ich habe verschiedene flexbox Optionen zusammen mit der Standardvertikale Ausrichtung ausprobiert, um keinen Erfolg zu haben.

Irgendwelche Ideen, wie ich den Text innerhalb der a-Tags in Flexbox zentrieren kann? Ich habe die CSS-Elemente von Inspect Element zu einem Plunker hinzugefügt, so dass nicht alle Teile relevant sind, aber Sie werden die Idee bekommen. 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

können Sie display:flex in .mobile-buttons .blue-bg verwenden:

.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

Viel unerwünschten Code und Vervielfältigung. Bitte schreiben Sie wie folgt um. Vertikale Ausrichtung auf Tags mit Flexbox Listenelemente können mit CSS Flexbox

getan werden, um diese durch Einstellung erreicht wird

.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>