HTML - 在中间垂直对齐答案

【问题标题】：HTML - vertical align at middleHTML - 在中间垂直对齐
【发布时间】：2017-07-27 23:13:22
【问题描述】：

我正在尝试为我的网站制作导航栏。我想用它的元素改变栏的高度。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  height: 100px;
}

li {
  float: left;
  vertical-align: middle;
}

li a {
  display: block;
  color: white;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

li form input {
  vertical-align: middle;
}

<ul>
  <li><a class="active" href="#menu">Menu</a></li>
  <li>
    <form>
      <input type="text" name="search" placeholder="Search..">
    </form>
  </li>
</ul>

我尝试使用“align-vertical”标签在中间垂直对齐我的元素。它不起作用。

【问题讨论】：

标签： html css text alignment

【解决方案1】：

一种方法是在ul 上使用padding 而不是height。

ul {
  list-style-type: none;
  margin: 0;
  padding: 50px 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
  vertical-align: middle;
}

li a {
  display: block;
  color: white;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

li form input {
  vertical-align: middle;
}

<ul>
  <li><a class="active" href="#menu">Menu</a></li>
  <li>
    <form>
      <input type="text" name="search" placeholder="Search..">
    </form>
  </li>
</ul>

另一种使用 flex 的方式。

ul {
...
  display: flex;
  align-items: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  height: 100px;
  display: flex;
  align-items: center;
}

li {
  float: left;
  vertical-align: middle;
}

li a {
  display: block;
  color: white;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

li form input {
  vertical-align: middle;
}

<ul>
  <li><a class="active" href="#menu">Menu</a></li>
  <li>
    <form>
      <input type="text" name="search" placeholder="Search..">
    </form>
  </li>
</ul>

【讨论】：

感谢您的回答！有用！我必须等待 10 分钟才能接受您的回答。
@float 很高兴它有帮助

【解决方案2】：

垂直居中元素的最简单方法之一是使用 Flexbox。添加：

display: flex; align-items: center;

你的 UL 上的样式将使 li 垂直居中。

【讨论】：

【解决方案3】：

vertical-align 属性仅适用于 display: inline-block。您可以利用flex，它现在得到了广泛的支持。

我做了什么—— 在这种情况下，在 ul 的容器上添加了 display: flex。另外，添加align-contents 使其位于导航栏的中间。

进一步阅读 - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
        height: 100px;
        display: flex;
        align-items: center;
    }

   

    li a {
        display: block;
        color: white;
        text-align: center;
        vertical-align:middle;
        text-decoration: none;

    }

    li a:hover {
        background-color: #111;
    }

    li form input{
        vertical-align:middle;
    }

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="lib/style.css" />
    </head>
    <body>
        <ul>
          <li><a class="active" href="#menu">Menu</a></li>
          <li>
              <form>
                <input type="text" name="search" placeholder="Search..">
              </form>
          </li>
        </ul>

    </body>
</html>

【讨论】：