Question

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

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'标签在中间垂直对齐我的元素。它不起作用。

Answer 1

执行此操作的一种方法是在padding上使用height代替ul。

＆＃13;

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

＆＃13;

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

＆＃13;

使用flex的另一种方式。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

display: flex; align-items: center;

UL上的样式将垂直居中。

Answer 3

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

将li元素line-height的{{1}}小于5px的高度ul。我已经line-height 95px给了它ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; height: 100px; } li { float: left; line-height: 95px; } 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; }

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

Public enum Faq{
 Undefined,
 Menu,
 Dialog
}

HTML - 在中间垂直对齐

4 个答案: