LI水平对齐 [英] Horizontally align LI

问题描述

我的页面上有5 li。

I've got 5 li on my page.

一个主题（第三个主题）高于另一个主题。我希望它们水平对齐此最大LI的中心。但是，它位于顶部。
我尝试使用垂直对齐：中间，但是它不起作用。

One of theme (the third) is higher than the other. I would like them to horizontally align to the center of this biggest LI. However, it's aligning on the top of it. I've tried to use "Vertical-align: middle" but it doesn't work.

这是我的实际代码：

 <link rel="stylesheet" href="style2015.css" />

<div id="menu">
<ul>
  <li><a href="#">Portfolio</a>
  <ul>
      <li><a href="#">Sous-item 1</a></li>
      <li><a href="#">Sous-item 2</a></li>
      <li><a href="#">Sous-item 3</a></li>
    </ul>
  </li>
  <li><a href="#">Projets</a>
  </li>
  <li id="logo"></li>
  <li><a href="#">A propos</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</div>

Css：

#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu li {
 float:left;
 margin:auto;
 padding:0;
 background-color:black;
 display: inline;
 vertical-align: middle;
 }
#menu li a {
 display:block;
 width:100px;
 color:white;
 text-decoration:none;

 }
#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 {
 height:30px;

 } 
/* Logo */ 
#logo{
 height: 190px;
 width: 266px;
  background-color:black;
}

推荐答案

#menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
  width: 700px;
  /* some fixed width so, menu doesn't fall on next line*/
}
#menu li {
  /*  float: left; you can't align a floated element easily */
  margin: auto;
  padding: 0;
  background-color: black;
  display: inline-block;
  vertical-align: middle;
}
#menu li a {
  display: block;
  width: 100px;
  color: white;
  text-decoration: none;
}
#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 {
  height: 30px;
}
/* Logo */

#logo {
  height: 190px;
  width: 266px;
  background-color: black;
}

<div id="menu">
  <ul>
    <li><a href="#">Portfolio</a>
      <ul>
        <li><a href="#">Sous-item 1</a>
        </li>
        <li><a href="#">Sous-item 2</a>
        </li>
        <li><a href="#">Sous-item 3</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Projets</a>
    </li>
    <li id="logo"></li>
    <li><a href="#">A propos</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</div>

如果我得到了您的问题正确，那么这就是您需要做的。我刚刚进行了必要的更改，其余的代码都归您所有。

If i got your question correct, then this is what you need to do. I have just made the required changes, rest of code is all yours.

这篇关于LI水平对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！