Как я могу вертикально выровнять два 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%; 
} 

Answer 2

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

Отрегулируйте высоту и ширина соответственно, но с функцией float это означает, что # banner-bottom будет пытаться плавать слева от # banner-top, однако потому что он не может сделать это в # баннере справа, он автоматически упадет ниже # banner-top, это означает, что он будет реагировать независимо от размера устройства и совместим с кросс-платформой. # В идеале целая страница должна использовать проценты, поскольку она будет масштабироваться для устройства.