用于ListItem

Question

我希望将ListItem Home，About，FAQ和Kontakt的文本垂直居中。 所有4个ListItem都应该低一点

我用

＆＃13;

＆＃13;

nav {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 18px;
  /*line-height: 24px;*/
  text-align: center;
  margin-top: 20px;
  float: right;
}
nav ul ul {
  display: none;
  margin: 0px;
}
nav ul li:hover > ul {
  display: block;
}
nav ul {
  background: #FFC400;
  background: -webkit-linear-gradient(top, #e05f03 0%, #ca5603 100%);
  background: -moz-linear-gradient(top, #e05f03 0%, #ca5603 100%);
  background: -o-linear-gradient(top, #e05f03 0%, #ca5603 100%);
  background: -ms-linear-gradient(top, #e05f03 0%, #ca5603 100%);
  background: linear-gradient(top, #e05f03 0%, #ca5603 100%);
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
  padding: 0 10px;
  border-radius: 10px;
  list-style: none;
  position: relative;
  display: inline-table;
}
nav ul:after {
  content: "";
  clear: both;
  display: block;
}
nav ul li {
  float: left;
  width: 150px;
  height: 60px;
}
nav ul li:hover {
  background: #4b545f;
  background: -moz-linear-gradient(top, #FFC400 0%, #FFA600 100%);
  background: -o-linear-gradient(top, #FFC400 0%, #FFA600 100%);
  background: -ms-linear-gradient(top, #FFC400 0%, #FFA600 100%);
  background: linear-gradient(top, #FFC400 0%, #FFA600 100%);
}
nav ul li:hover a {
  color: #fff;
  text-decoration: none;
}
nav ul li a {
  display: block;
  padding: 10px 10px;
  color: white;
  text-decoration: none;
}
nav ul ul {
  /*background: #5f6975;*/
  border-radius: 0px;
  padding: 0;
  position: absolute;
  top: 100%;
}
nav ul ul li {
  float: none;
  width: 120px;
  position: relative;
}
nav ul ul li a {
  padding: 15px 20px;
  color: #fff;
}
nav ul ul li a:hover {
  background: #4b545f;
}

＆＃13;

<nav>
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li>
      <a href="#">Large word need 2 lines</a>
      <ul>
        <li><a href="#">Photoshop</a>
        </li>
        <li><a href="#">Illustrator</a>
        </li>
        <li><a href="#">Illustrator</a>
        </li>
        <li><a href="#">Illustrator</a>
        </li>
        <li><a href="#">Illustrator</a>
        </li>
        <li><a href="#">Illustrator</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">About</a>
      <ul>
        <li><a href="#">Web Design</a>
        </li>
        <li><a href="#">User Experience</a>
        </li>
      </ul>
    </li>
    <li><a href="#">FAQ</a>
    </li>
    <li><a href="#">Kontakt</a>
    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试吧

nav ul li {
   float: left;
   width: 150px;
   height: 60px;
   line-height:40px;
   vertical-align:middle;
}

Answer 2

尝试利用flexbox：

https://jsfiddle.net/2nd64LtL/

li个项目变为灵活容器并获得display:flex和flex-direction: column;，所包含的a个元素获得margin: auto，这些元素会沿着弹性框架垂直居中轴：

nav ul li {
   float: left;
   width: 150px;
   height: 60px;
   display:flex;
   flex-direction: column;
}
nav ul li a {
  padding: 10px 10px;
  color: white;
  text-decoration: none;
  margin: auto;
}

Answer 3

从float移除了height和nav ul li个样式，选择器>已添加到目标直接子项，而不影响子菜单项。

nav > ul > li {
    width: 150px;
    vertical-align: middle;
    display: inline-block;
}

nav {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 18px;
  /*line-height: 24px;*/
  text-align: center;
  margin-top: 20px;
  float: right;
}
nav ul ul {
  display: none;
  margin: 0px;
}
nav ul li:hover > ul {
  display: block;
}
nav ul {
  background: #FFC400;
  background: -webkit-linear-gradient(top, #e05f03 0%, #ca5603 100%);
  background: -moz-linear-gradient(top, #e05f03 0%, #ca5603 100%);
  background: -o-linear-gradient(top, #e05f03 0%, #ca5603 100%);
  background: -ms-linear-gradient(top, #e05f03 0%, #ca5603 100%);
  background: linear-gradient(top, #e05f03 0%, #ca5603 100%);
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
  padding: 0 10px;
  border-radius: 10px;
  list-style: none;
  position: relative;
  display: inline-table;
}
nav ul:after {
  content: "";
  clear: both;
  display: block;
}
nav ul li {
  width: 150px;
  vertical-align: middle;
  display: inline-block;
}
nav ul li:hover {
  background: #4b545f;
  background: -moz-linear-gradient(top, #FFC400 0%, #FFA600 100%);
  background: -o-linear-gradient(top, #FFC400 0%, #FFA600 100%);
  background: -ms-linear-gradient(top, #FFC400 0%, #FFA600 100%);
  background: linear-gradient(top, #FFC400 0%, #FFA600 100%);
}
nav ul li:hover a {
  color: #fff;
  text-decoration: none;
}
nav ul li a {
  display: block;
  padding: 10px 10px;
  color: white;
  text-decoration: none;
}
nav ul ul {
  /*background: #5f6975;*/
  border-radius: 0px;
  padding: 0;
  position: absolute;
  top: 100%;
}
nav ul ul li {
  float: none;
  width: 120px;
  position: relative;
}
nav ul ul li a {
  padding: 15px 20px;
  color: #fff;
}
nav ul ul li a:hover {
  background: #4b545f;
}

<nav>
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li>
      <a href="#">Large word need 2 lines</a>
      <ul>
        <li><a href="#">Photoshop</a>
        </li>
        <li><a href="#">Illustrator</a>
        </li>
        <li><a href="#">Illustrator</a>
        </li>
        <li><a href="#">Illustrator</a>
        </li>
        <li><a href="#">Illustrator</a>
        </li>
        <li><a href="#">Illustrator</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">About</a>
      <ul>
        <li><a href="#">Web Design</a>
        </li>
        <li><a href="#">User Experience</a>
        </li>
      </ul>
    </li>
    <li><a href="#">FAQ</a>
    </li>
    <li><a href="#">Kontakt</a>
    </li>
  </ul>
</nav>

https://jsfiddle.net/v2opnsqt/6/