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

我想用html和css设计我的网站标题。我的标题由顶部的一条长旗组成。此横幅分为两个div：＃banner-left和＃banner-right。＃banner-right被分成两个div：＃banner-top和＃banner-＃bottom。顶部div是我的社交链接导航，底部div是主要导航。如何垂直对齐另一个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>

来源

2016-02-12 ShoeLace1291

您可以使用边距和填充调整，他们是相对于垂直空间，例如：

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

来源

2016-02-12 18:18:56 TylerT

这种方法并不是真正的垂直居中。 – ShoeLace1291

#banner-top 
{ 
height:50%; 
width:100%; 
float:left; 
} 
#banner-bottom 
{ 
height:50%; 
width:100%; 
float:left; 
}

调整高度和宽度相应，但使用浮动功能，它将意味着＃banner-bottom会尝试浮动到＃banner-top的左侧因为它无法在＃横幅内执行此操作，因此它会自动下拉到＃横幅顶部下方，这意味着它无论设备大小，都能够响应，并且跨平台兼容。＃理想情况下，您的整个页面应该使用百分比，因为它会扩展到设备。

来源

2016-02-12 20:32:55

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

回答

相关问题