css - UL inside a Div vertically centered | Bootstrap 3.3.7

Question

我是 StackOverflow(和 HTML5/CSS)的新手，这是我的第一篇文章。 (而且我英语说得不是很好)

我正在尝试在 div 中制作导航栏，但我无法垂直居中。我试过:

• 垂直对齐:居中；
• 更改内容 div 的高度并使 UL 居中
• “播放”显示属性

• 阅读我在互联网上找到的所有帖子，但我无法理解。

  .文章{ 边框:1px 实心； 边框颜色:rgba(210,246,1, 1);

<div class="row article">
  <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
    <ul class="nav nav-pills nav-stacked">
      <li>
        <a href="#">
          <img src="{% static 'imagenes/logo.png' %}" alt="Stia" class="logopeque">Convenio Vigente
        </a>
      </li>
      <li>
        <a href="#">
          <img src="{% static 'imagenes/logo.png' %}" alt="Stia" class="logopeque">Escala Salarial vigente
        </a>
      </li>
      <li>
        <a href="#">
          <img src="{% static 'imagenes/logo.png' %}" alt="Stia" class="logopeque">Escalas Salariales Anteriores
        </a>
      </li>
    </ul>
  </div>
  <div class="col-xs-12 col-sm-8 col-md-9 col-lg-9">
    <section>
      <p class="centrarp">
        <h3>Convenio 244/94</h3>
        <h5 class="justificar">TRABAJADORES COMPRENDIDOS - ENUNCIACION DE ACTIVIDADES</h5>
        <p class="justificar centrarp">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
          adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
          velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </section>
  </div>
</div>

this is the result

Answer 1

因为您不希望在您网站上的每一个 .row.article 上都有这个，所以我添加了一个自定义类:.vCenter。

@media(min-width: 768px) {
  .row.article.vCenter {
    display: flex;
  }
  .row.article.vCenter>.col-lg-3 .nav-pills {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row article vCenter">
  <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
    <ul class="nav nav-pills nav-stacked">
      <li>
        <a href="#">
          <img src="{% static 'imagenes/logo.png' %}" alt="Stia" class="logopeque">Convenio Vigente
        </a>
      </li>
      <li>
        <a href="#">
          <img src="{% static 'imagenes/logo.png' %}" alt="Stia" class="logopeque">Escala Salarial vigente
        </a>
      </li>
      <li>
        <a href="#">
          <img src="{% static 'imagenes/logo.png' %}" alt="Stia" class="logopeque">Escalas Salariales Anteriores
        </a>
      </li>
    </ul>
  </div>
  <div class="col-xs-12 col-sm-8 col-md-9 col-lg-9">
    <section>
      <p class="centrarp">
        <h3>Convenio 244/94</h3>
        <h5 class="justificar">TRABAJADORES COMPRENDIDOS - ENUNCIACION DE ACTIVIDADES</h5>
        <p class="justificar centrarp">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
          adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
          velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </section>
  </div>
</div>

如果你更喜欢它们更“间隔”，你可以尝试 space-around 甚至 space-between 而不是 center 证明内容。

并且不要忘记通过 Autoprefixer 解析您的最终 CSS在部署之前。