對齊中間的搜索輸入 - CSS

我有一個很大的問題，我無法解決它。對齊中間的搜索輸入 - CSS

我有一個頂部菜單，左側有一個圖像，右側有一個搜索框。我希望這個搜索框保持在中間，但行高不在那裏工作......我不知道該怎麼做。

body { 
margin: 0; 
padding: 0; 
//background-color:#eee; 
background-color:#F5F6FA; 
font-family: 'Open Sans', sans-serif; 
font-size:12px; 
} 

*{ 
margin: 0; 
padding: 0; 
list-style: none; 
} 


#menu { 
background-color: rgba(35,35,35,.9); 
//border-bottom:1px solid #eee; 
position:fixed; 
width:100%; 
top:0; 
margin:0; 
//padding: 0; 
color: #fff; 
text-align: center; 
height:50px; 
z-index:100; 
} 
#menu a:link, #menu a:visited, #menu a:hover{ 
color: #fff; 
} 
#menu ul{ 
display:table; 
width:100%; 
list-style-type: none; 
} 
#menu li{ 
text-align:left; 
display: table-cell; 
width:50%; 
border:1px solid yellow; 
} 
.right{ 
text-align:right !important; 
padding-right:10px; 
} 
#menu img{ 
margin-left:10px; 
max-height:40px; 
} 
.search{ 
padding-left:10px; 
padding-right:10px; 
padding-top:4px; 
padding-bottom:4px; 
border:1px solid #fff; 
border-radius:7px; 
color:#555; 
font-weight:bold; 
}

HTML

<div id="menu"> 
<ul> 
<li><a href=""><img src="https://infooab.examtime.com/wp-content/themes/learn/img/flashcard_shortcode_icon.png"></a></li> 
<li class=right><form class="searchform"><input type="text" name="search" class="search" placeholder="search"></form></li> 
</ul> 
</div>

我該如何調整輸入，中間無垂直讓左邊interfearing圖像的大小？謝謝各位朋友！

來源

2015-08-26 renata costa

在#menu li..simple中使用vertical-align：middle .. –

@Leothelion發表答案？ – Popnoodles

@AlexChar，thanx一噸人.. :)它很難找到像你這樣的人.. :) –

所以作爲發佈答案..

請在你的CSS添加這個和你的盒子將在middle..please是記住，當你使用顯示器;表單元格，然後使用垂直align..hope這將有助於.. :)

#menu li{vertical-align:middle;}

來源

2015-08-26 08:21:47

更改此：

#menu ul { 
    display:table; 
    width:100%; 
    list-style-type: none; 
}

這樣：

#menu ul { 
    display:table; 
    width:100%; 
    list-style-type: none; 
    height: 100%; 
}

這：

#menu li { 
    text-align:left; 
    display: table-cell; 
    width:50%; 
    border:1px solid yellow; 
}

這樣：

#menu li { 
    text-align:left; 
    display: table-cell; 
    width:50%; 
    border:1px solid yellow; 

    vertical-align: middle; 
}

Here is the JSFiddle demo

來源

2015-08-26 08:22:36

CSS

#menu li { 
    border: 1px solid yellow; 
    display: table-cell; 
    text-align: left; 
    vertical-align: middle; 
    width: 50%; 
}

工作jsfiddle

來源

2015-08-26 08:42:17 falguni

對齊中間的搜索輸入 - CSS

回答

相關問題