0
我將堆疊的圖標與我的菜單在同一高度對齊。 這裏html代碼：如何使我的菜單以verticaly爲中心
/*
====================== MAIN ======================
*/
.main-menu {
background-color: #ffffff;
padding: 16px 5px;
margin: 0;
display: inline-block;
position: relative;
\t width: 100%;
}
.main-menu:before,
.main-menu ul,
.main-menu li,
.main-menu a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
border: 0;
list-style: none;
}
.main-menu a {
cursor: pointer;
}
.main-menu,
.main-menu a,
.main-menu a:visited {
color: #555555;
}
.main-menu > li {
display: inline-block;
\t vertical-align: middle;
float: left;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.main-menu > li > a {
font-weight: bold;
padding: 0 10px;
line-height: 39px;
}
.main-menu > li:hover {
background-color: #8B008B;
}
.main-menu > li:hover > a,
.main-menu > li:hover > a:visited {
color: #ffffff;
}
.main-menu li {
position: relative;
cursor: default;
}
.main-menu li > a {
text-decoration: none;
display: block;
}
.main-menu li > ul{
z-index: 1;
}
.main-menu .fa {
font-size: 12pt;
letter-spacing: 8px;
line-height: inherit;
}
.main-menu:after {
content: '';
display: block;
clear: both;
}
/*
====================== LOGO ======================
*/
.main-menu > li.mm-logo {
float: left;
margin-left: 0;
font-size: 0;
display: inline-block;
vertical-align: middle;
}
.main-menu > li.mm-logo a {
padding: 0;
line-height: 0;
}
.main-menu > li.mm-logo img {
border: none;
display: block;
padding:0px;
height: 118px;
width: 118px;
}
.main-menu > li.mm-logo:hover {
background: none;
}
/*
====================== RESPONSIVE ======================
*/
@media screen and (max-width: 768px) {
/* ====================== MAIN ====================== */
.main-menu[class*='mm-response'] > li {
position: relative;
}
.main-menu[class*='mm-response'] > li > ul{
left: 0;
right: 0;
width: auto !important;
margin-right: 0;
}
.main-menu[class*='mm-response'] > li > ul ul {
top: 100%;
margin-left: 39px !important;
}
/* ====================== SWITCH ====================== */
.main-menu.mm-response-switch > li {
display: none;
float: none;
position: relative;
width: 100%;
}
.main-menu.mm-response-switch > li + li {
margin-left: 0;
margin-top: 10px;
}
.main-menu.mm-response-switch > li.mm-logo {
display: block;
}
.main-menu.mm-response-switch > li.mm-logo img {
position: relative;
z-index: 1;
}
.main-menu.mm-response-switch:before {
font-family: FontAwesome;
content: '\f0c9';
position: relative;
float: right;
cursor: pointer;
line-height: 39px;
height: 39px;
padding: 0 14px;
z-index: 2;
}
.main-menu.mm-response-switch:hover:before {
opacity: 0;
}
.main-menu.mm-response-switch:hover > li {
display: block;
}
/* ====================== RESPONSE MARGIN ====================== */
.main-menu.mm-response-margin > li > ul {
margin-left: 39px !important;
}
}<nav>
<ul onClick="" class="main-menu mm-response-switch">
<li class="mm-logo">
<a href="index.php"><img src="logo.png" alt="Accueil"></a>
</li>
<li>
<a href="#"><i class="fa fa-indent"></i>Lien 1</a>
</li>
<li>
<a href="#"><i class="fa fa-indent"></i>Lien 2</a>
</li>
<li>
<a href="#"><i class="fa fa-indent"></i>Lien 2</a>
</li>
</ul>
</nav>不給，反應靈敏的部分更重要，只是我的GUID如何在verticaly同一行的所有元素。 謝謝你的幫助。
嗨，你有沒有得到解決您的問題？如果您覺得問題已解決，您應該接受答案。您可以在答案旁邊接受答案，並選擇小複選標記。 –