使菜单垂直居中，并带有徽标图像

时间：2017-03-03 20:23:12

标签： html css html5 css3

我试图将徽标与我的菜单对齐在同一高度。 这里是html代码：

＆＃13;
＆＃13; 
/*
====================== MAIN ======================

*/
.main-menu {
  background-color: #ffffff;
  padding: 16px 5px;
  margin: 0;
  display: inline-block;
  position: relative;
	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;
	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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

不要过于重视响应部分，只是指导我如何将所有元素垂直地放在同一行。

3 个答案:

答案 0 :(得分：1)

移除li元素中的浮点数，它们将垂直对齐，因为li为inline-block并且您已经指定了vertical-align: middle 

/*
====================== MAIN ======================

*/
.main-menu {
  background-color: #ffffff;
  padding: 16px 5px;
  margin: 0;
  display: inline-block;
  position: relative;
	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;
	vertical-align: middle;
  -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 {
  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>

您还可以使用flexbox并将display: flex; align-items: center;分配给父ul 

/*
====================== MAIN ======================

*/
.main-menu {
  background-color: #ffffff;
  padding: 16px 5px;
  margin: 0;
  position: relative;
	width: 100%;
  display: flex;
  align-items: center;
}
.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;
	vertical-align: middle;
  -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 {
  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>

答案 1 :(得分：0)

有几种方法可以做到这一点;

一种方法是给父母位置：相对，然后绝对定位徽标top: 50%然后transformY(-50%)，将英文翻译为＆＃34;将徽标顶部放置在父级1 / 2向下，然后将徽标向上移动1/2的高度。

这里有一个方便的流程图，可以使用不同的技术。 https://css-tricks.com/centering-css-complete-guide/

答案 2 :(得分：0)

试试这个：

.main-menu{
    display: flex;
    align-items: center;
}

并将其恢复为显示：当屏幕太小时阻止：

@media screen and (max-width: 768px)
.main-menu{
    flex-direction: column;
}

如果您想了解有关flexbox的更多信息，我建议您阅读这篇精彩的文章：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

相关问题
最新问题