垂直对齐 li 元素中间的 div

Posted

技术标签:

【中文标题】垂直对齐 li 元素中间的 div【英文标题】:vertical align a div in middle of li elements 【发布时间】:2016-10-02 14:31:56 【问题描述】:

divliul 我迷失了方向。我无法在表单输入中间垂直对齐单词 EN。

这里是演示: https://jsfiddle.net/z9qjcv2k/

我尝试使用 heightline-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的主要内容,如果未能解决你的问题,请参考以下文章

HTML CSS中如何实现DIV中的图片水平垂直居中对齐

css在一个div中水平+垂直对齐3个元素

<ul> 水平导航栏...垂直对齐元素

<ul> 水平导航栏...垂直对齐元素

使用CSS垂直和水平对齐(中间和中心)[重复]

垂直对齐块元素