小贝子编程

垂直以徽标图像为中心菜单



我试图将徽标与菜单相同的高度对齐。这里的HTML代码：

/*
====================== 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;
  }
}
<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>

不要更重要的是响应式部分，只需指导我如何垂直使所有元素在同一行中制作所有元素。

从 li元素中删除浮子，它们将垂直对齐，因为 li's是 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>

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

一种技术是给出父位置：相对，然后绝对位置徽标top: 50%，然后将transformY(-50%)转换为"将徽标的顶部定位在父1/2中，然后将徽标向上移动1/其高度的2个。

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

尝试以下：

.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/

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium