[英]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.