垂直对齐 li 元素中间的 div
Posted
技术标签:
【中文标题】垂直对齐 li 元素中间的 div【英文标题】:vertical align a div in middle of li elements 【发布时间】:2016-10-02 14:31:56 【问题描述】: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;
【问题讨论】:
你的问题很不清楚,请补充更多细节和想要的结果是什么 【参考方案1】:重新定义.menu类浮动
.menu
.....
float: none;
并为 .menu li a 设置适当的填充
.menu li a
padding 2px;
【讨论】:
以上是关于垂直对齐 li 元素中间的 div的主要内容,如果未能解决你的问题,请参考以下文章