如何垂直對齊另一個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？

回答

相關問題