在移动屏幕中垂直对齐li元素

Question

我在“div”元素中有一个“ul”元素，其HTML如下：

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

带有此HTML的桌面视图如image1 所示

而移动视图在image2

我所拥有的对齐对于桌面视图是正确的，而我希望这些元素在移动屏幕中垂直对齐在屏幕的中心。我怎么做？我是CSS新手，并不完全明白应该做什么。我尝试使用“vertical-align：center”，但不起作用。

请帮忙！

Answer 1

您可以使用Flexbox和@media查询来执行此操作：

* {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 flex-items 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>