вертикальный выровнять a div в середине элементов li

Question

Я потерян и смущен div, li и ul. Я не могу вертикально выровнять слово EN в середине ввода формы.

Вот демо: https://jsfiddle.net/z9qjcv2k/

Я попытался с height и line-height, которые должны иметь одинаковую высоту, и я не могу заставить его работать.

Спасибо всем.

HTML:

<div class='line'> 
    <div class='content_line'> 
    <ul class='alignes'> 
     <li> 
     <div class='menu'> 
     <ul class='menu'> 
      <li class='menu'><a href='index.php?langue=en'>EN</a></li> 
     </ul> 
     </div> 
     </li> 
     <li><input type=text name=mots size=50 placeholder='Search...'></li> 
     </ul> 
</div> 

CSS:

*{ 
    margin:0; 
} 

.line{ 
height:100px; 
background-color:#1b1b1b; 
text-align:center; 
border-top:1px solid #444444; 
border-bottom:1px solid #444444; 
padding-left:5%; 
} 

.alignes ul{ 


list-style-type:none; 
} 


.alignes li{ 
    display: inline; 
    height: 233px; 
    line-height: 233px; 
color:#aaa8a9; 
position:relative; 
top:20px; 
    height: 233px; 
    line-height: 233:px; 


} 

.content_line{ 
padding-left:15%; 
} 








.menu{ 
display:inline important!; 
float:left; 


} 

.menu ul { 
margin:0; 
padding:0; 
list-style-type:none; 
text-align:center; 
} 
.menu li { 
float:left; 
margin:auto; 
padding:0; 
line-height:10px; 
height:10px; 
} 
.menu li a { 
display:block; 
width:100px; 
color:red; 
line-height:233px; 
height:233px; 
text-decoration:none; 
padding:5px; 
} 
.menu li a:hover { 
color:#FFD700; 
} 
.menu ul li ul { 
display:none; 
} 

.menu ul li:hover ul { 
display:block; 
} 
.menu li:hover ul li { 
float:none; 
} 
.menu li ul { 
position:absolute; 
} 

Answer 1

Redefine .menu класс поплавок

.menu { 
    ..... 
    float: none; 
    } 

и установить правильное заполнение для .menu Ли с

.menu li a { 
    padding 2px; 
}