CSS Vertical align center for text inside of ListItem - html

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>Home
</li>
<li>
Large word need 2 lines
<ul>
<li>Photoshop
</li>
<li>Illustrator
</li>
<li>Illustrator
</li>
<li>Illustrator
</li>
<li>Illustrator
</li>
<li>Illustrator
</li>
</ul>
</li>
<li>
About
<ul>
<li>Web Design
</li>
<li>User Experience
</li>
</ul>
</li>
<li>FAQ
</li>
<li>Kontakt
</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>Home
</li>
<li>
Large word need 2 lines
<ul>
<li>Photoshop
</li>
<li>Illustrator
</li>
<li>Illustrator
</li>
<li>Illustrator
</li>
<li>Illustrator
</li>
<li>Illustrator
</li>
</ul>
</li>
<li>
About
<ul>
<li>Web Design
</li>
<li>User Experience
</li>
</ul>
</li>
<li>FAQ
</li>
<li>Kontakt
</li>
</ul>
</nav>
https://jsfiddle.net/v2opnsqt/6/