Align li elements vertically in mobile screen - html

Question

I have a "ul" element inside inside a "div" element for which the HTML is as follows:
<ul id = "list" class='nav nav-pills'>
<li class='active'>
<a style="width:330px; height:50px; text-align: center;" data-filter=".portfolio-filter-photography" href="#">
<strong>
First
</strong>
</a>
</li>
<li >
<a style="width:330px; height:50px;" data-filter=".portfolio-filter-identity" href="#">
<strong>
Second
</strong>
</a>
</li>
<li >
<a style="width:100px; height:50px; text-align: center; vertical-align: middle;" data-filter=".portfolio-filter-faqs" href="#">
<strong style="vertical-align: -webkit-baseline-middle;">
Third
</strong>
</a>
</li>
</ul>
The desktop view with this HTML is as shown in image1
while the mobile view is in image2
The alignments I have are correct for Desktop view while I want these elements to be aligned vertically at the center of the screen in a mobile screen. How do I do that? I am new to CSS and don't exactly understand what should be done. I tried putting "vertical-align: center", but doesn't work.
Kindly help!

Answer 1

You can do it with Flexbox and #media queries:
* {margin: 0; padding: 0; box-sizing: border-box}
#list {display: flex} /* displays flex-items (children) inline */
#list > li {
flex: 1; /* each takes 33.33% of the parent's width; adjust to your needs */
display: flex;
justify-content: center; /* centers them horizontally (instead of text-align: center) */
align-items: center; /* and vertically */
height: 50px;
}
#media (max-width: 568px) {
#list {flex-direction: column} /* stacks them vertically */
}
<div class="row">
<div class="col-md-12 col-sm-12">
<ul id="list" class='nav nav-pills'>
<li class='active'>
<a data-filter=".portfolio-filter-photography" href="#">
<strong>First</strong>
</a>
</li>
<li>
<a data-filter=".portfolio-filter-identity" href="#">
<strong>Second</strong>
</a>
</li>
<li>
<a data-filter=".portfolio-filter-faqs" href="#">
<strong>Third</strong>
</a>
</li>
</ul>
</div>
</div>