html - Why is vertical-align: bottom not working? -


i have section of code header portion of website:

.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>

i wanted bottom of image line bottom of navbar. what's happening image lower navbar. ideas why?

set list items 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>


Comments

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -