在标题中垂直居中标志和菜单项的最佳做法 [英] Best practice for vertically centering logo and menu items in header

问题描述

我经常发现自己不得不在全宽标题中垂直居中显示标志和主菜单。是否有广泛接受的方法来处理这个问题？

I constantly find myself having to vertically center both the logo and main menu in a full-width header. Is there a widely accepted method to handle this?

推荐答案

#header {
  box-sizing: border-box;
  background: #ffc301;
  padding: 10px 15px;
  display: table;
  width: 100%;
  height: 70px;
}

.logo {
    background: #000;
    text-align: center;
    width: 70px;
    color: #fff;
}

.logo,
.menu {
  vertical-align: middle;
  display: table-cell;
}

.menu ul {
  text-align: right;
}

.menu ul li {
  display: inline-block;
  vertical-align: top;
}

<header id="header">
  <div class="logo">Logo</div>
  <nav class="menu">
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
    </ul>
  </nav>
</header>

这篇关于在标题中垂直居中标志和菜单项的最佳做法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！