CSS垂直对齐中心，用于ListItem中的文本

Question

I want to center vertical the text of the ListItem Home, About, FAQ and Kontakt. All 4 ListItems should be a bit lower

I use

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

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

Answer 1

Try it

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

Answer 2

Try to take advantage of flexbox:

https://jsfiddle.net/2nd64LtL/

The li items become flex containers and get display:flex and flex-direction: column; , the included a elements get margin: auto , which centers them vertically along the flex-axis:

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

Removed float and height styles from nav ul li , selectors > added to target immediate children and not effect submenu items.

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/