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%;
}

Answer 2

private String id = "username";
private String pass = "pass";

Adjust the height and width accordingly but with the float function it'll mean that #banner-bottom will attempt to float to the left of #banner-top however because it can't do that within the #banner-right it'll automatically drop down underneath #banner-top, this means it'll be responsive no matter the size of the device and is cross-platform compatible.# Ideally your entire page should be using percentages as it'll scale to the device.

如何在另一个div中垂直对齐两个div？

2 个答案: