CODEWITHSUNDEEP
htmlcssresponsive-design
Yesha
Yesha

Reputation: 678

Align li elements vertically in mobile screen

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 enter image description here

while the mobile view is in image2 enter image description here

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!

Upvotes: 2

Views: 923

Answers (1)

VXp
VXp

Reputation: 12068

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>

Upvotes: 4

Related Questions