vertikal ausrichten ein div in der Mitte von li Elementen

Question

Ich bin verloren und verwirrend div, li und ul. Ich kann das Wort EN in der Mitte der Formulareingabe nicht vertikal ausrichten. Hier

ist die Demo: https://jsfiddle.net/z9qjcv2k/

Ich habe versucht, mit height und line-height, die die gleiche Höhe haben sollte, und ich kann nicht damit es funktioniert.

Vielen Dank.

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

neu definieren .menu Klasse float

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

und eine richtige Polsterung auf .menu li a

.menu li a { 
    padding 2px; 
}