我在我的頁面上有5個li。Horizontaly align LI
其中一個主題(第三個)高於另一個。我希望他們horinzontaly對齊這個bigest李的中心。然而,它在它的頂部。 我試過使用「垂直對齊:中間」,但它不起作用。
這裏是我的實際代碼:
<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;
}
你可以做一個小提琴或codepen?一切看起來對齊在我身邊 – NooBskie
http://codepen.io/anon/pen/MaOxJY – Ezhno