Help Needed: Alignment Issue with Anchor Tags in List
I am facing a challenge with vertically aligning the anchor tags inside my list. The number of list items varies based on the pages of my website, so I have used display flex on the list and flex: 1 on the list items. However, the anchor tags within the list items are aligned to the top, giving an awkward look due to the uniform height set by flex.
*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "Helvetica", sans-serif;
font-size: 2em;
}
div {
height: 100vh;
width: 100vw;
}
ul {
display: -webkit-flex;
display: flex;
flex-flow: column nowrap;
height: 100%;
list-style: none;
}
li:first-child {
background-color: #35CE93;
}
li:nth-child(2) {
background-color: #3A999F;
}
li:last-child {
background-color: #59ADEB;
}
li {
display: block;
-webkit-flex: 1;
flex: 1;
flex-direction: row-reverse;
width: 100%;
text-align: center;
}
a {
color: inherit;
text-decoration: none;
}<div>
<ul>
<li>
<a href="#">test</a>
</li>
<li>
<a href="#">test</a>
</li>
<li>
<a href="#">test</a>
</li>
</ul>
</div>I have considered options like adding a span inside the anchor tag or using jQuery, but they seem complex and may cause issues on other sites where this code is applied.
UPDATE I tried fixing the alignment issue with the following CSS, but it does not work on iPhones:
a {
color: inherit;
text-decoration: none;
display: inline-block;
vertical-align: middle;
height: 100%;
}
a:before {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}