0
Ich bin gestapelt, um das Logo in der gleichen Höhe mit meinem Menü auszurichten. Hier wird der HTML-Code:Wie mache ich mein Menü vertikal zentriert?
/*
====================== 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>nicht mehr Wert auf den ansprechenden Abschnitt geben, guid mich nur, wie alle Elemente in der gleichen Zeile verticaly zu machen. Vielen Dank für Ihre Hilfe.
Hallo, haben Sie eine Lösung für Ihr Problem ? Sie sollten eine Antwort akzeptieren, wenn das Problem gelöst ist. Sie können eine Antwort mit dem kleinen Häkchen neben Antworten annehmen. –