html - 如何垂直对齐另一个 div 内的两个 div？

Question

我正在尝试使用 html 和 css 设计我的网站标题。我的标题由顶部的一个长横幅组成。此横幅分为两个 div:#banner-left 和#banner-right。 #banner-right 又分为两个 div:#banner-top 和#banner-#bottom。顶部的 div 是我的社交链接导航，底部的 div 是主导航。

我希望社交链接与右横幅上半部分的垂直中间对齐，主导航与横幅下半部分的垂直中间对齐。问题在于社交链接位于上半部分的底部，而主导航位于下半部分的顶部。这是一个 jsFiddle

header {
  background: #D7DADB;
  margin: 0px;
  padding: 0px 15px;
  border-bottom: 15px solid #FC4349;
}
header #banner {
  padding: 15px;
  display: table;
  position: relative;
  width: 100%;
}
header #banner #banner-left {
  padding: 0px 25px 0px 0px;
  display: table-cell;
  vertical-align: middle;
}
header #banner #banner-left h1 {
  font-size: 3em;
  color: #FC4349;
  font-family: PowerChord;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #fff;
}
header #banner-left p {
  font-size: 2em;
  color: #2C3E50;
}
header #banner #banner-right {
  border-left: 1px solid #6DBCDB;
  padding: 15px;
  overflow: auto;
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}
header #banner #banner-right #banner-top {
  border-bottom: 1px solid #6DBCDB;
}
header #banner #banner-right #banner-top ul {
  list-style: none;
  display: table-cell;
  vertical-align: middle;
}
header #banner #banner-right #banner-top ul > li {
  display: inline-block;
  margin-right: 15px;
}
header #banner #banner-right #banner-top ul > li a {
  font-size: 2em;
}
header #banner #banner-right #banner-bottom nav {
  display: table-cell;
  vertical-align: middle;
}
header #banner #banner-right #banner-bottom nav ul {
  list-style: none;
}
header #banner #banner-right #banner-bottom ul > li {
  display: inline-block;
}

<header>
  <div id="banner">
    <div class="container">
      <!--Bootstrap container -->
      <div id="banner-left">
        <h1>Site Name</h1>
        <p>Some catchy slogan...</p>
      </div>
      <div id="banner-right">
        <div id="banner-top">
          <ul>
            <li><a href="#"><i class="fa fa-facebook"></i></a>
            </li>
            <li><a href="#"><i class="fa fa-twitter"></i></a>
            </li>
            <li><a href="#"><i class="fa fa-instagram"></i></a>
            </li>
            <li><a href="#"><i class="fa fa-linkedin"></i></a>
            </li>
          </ul>
        </div>
        <div id="banner-bottom">
          <nav>
            <ul>
              <li><a href="#">Home</a>
              </li>
              <li><a href="#">About</a>
              </li>
              <li><a href="#">Contact</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</header>

Answer 1

您可以使用边距和填充来调整它们相对于垂直空间的位置，例如:

header #banner #banner-right #banner-top {
    border-bottom: 1px solid #6DBCDB;
  margin-bottom:15%;
  padding-bottom:15%;
}