Vertical alignment on a tags with Flexbox list items

Question

I have some variable length text in some list boxes, this causes the not match due to the text within a tags not vertical aligning.

I have tried various flexbox options along with the standard vertical align too no avail.

Any ideas how I can center the text within the a tags within Flexbox? I have added the CSS elements from Inspect Element to a Plunker, so not al lparts will be relevant but you'll get the idea. 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

You can use display:flex in .mobile-buttons .blue-bg :

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

Much unwanted code and duplication. Please rewrite as the following. Vertical alignment on tags with Flexbox list items can be done by using CSS Flexbox

This is achieved by setting

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