[英]vertical align a div in middle of li elements
我迷失了,令人困惑的是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;
}
重新定义.menu类浮动
.menu {
.....
float: none;
}
并设置一个适当的填充.menu li a
.menu li a {
padding 2px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.