Почему вертикальное выравнивание: нижнее не работает?

Question

У меня есть часть кода для заголовочной части моего сайта:

.nav { 
 
    position:relative; 
 
    display:inline-block; 
 
} 
 
#header-image { 
 
    display:inline-block; 
 
    position:relative; 
 
    height:50%; 
 
} 
 
.header-container { 
 
    height:6vw; 
 
    position:relative; 
 
    vertical-align: bottom; 
 
}

<div class="header-container"> 
 
    <a href='index.html'> 
 
     <img src='img/logo.png' alt="Logo" id='header-image'/> 
 
    </a> 
 
    <nav class="nav"> 
 
     <ul> 
 
      <li><a href='aboutus.html'>About Us</a></li> 
 
      <li><a href='activities.html'>Activities</a></li> 
 
      <li><a href='google.ca'>Media</a></li> 
 
      <li><a href='google.ca'>Contact Us</a></li> 
 
     </ul> 
 
    </nav> 
 
</div>

Я хотел нижнюю часть изображения на линию с нижней навигационной панели. Но происходит то, что изображение ниже, чем навигация. Любые идеи почему?

Answer 1

Набор элементов списка в display: inline-block;

.nav { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
#header-image { 
 
    position: relative; 
 
} 
 
.header-container { 
 
    position: relative; 
 
    vertical-align: bottom; 
 
} 
 
li { 
 
    display: inline-block; 
 
}

<div class="header-container"> 
 
    <a href="index.html"> 
 
    <img src='http://placehold.it/50x50' id='header-image' /> 
 
    </a> 
 
    <nav class="nav"> 
 
    <ul> 
 
     <li><a href='aboutus.html'>About Us</a> 
 
     </li> 
 
     <li><a href='activities.html'>Activities</a> 
 
     </li> 
 
     <li><a href='google.ca'>Media</a> 
 
     </li> 
 
     <li><a href='google.ca'>Contact Us</a> 
 
     </li> 
 
    </ul> 
 

 
    </nav> 
 
</div>

Answer 2

.nav { 
    position:relative; 
    display:inline-block; 
} 

#header-image { 
    display: inline-block; 
    position: absolute; 
    bottom: 15px; 
} 
.header-container { 
    position:relative; 
} 

Используйте эти настройки для укладки могут заполнить ваши требования