Align Image in the middle of a floated element, that gets parent height

Question

I have the following structure/code:

.navbar__brand, .navcontainer { 
float:left;
}

.navbar__brand img {
vertical-align:middle;}
          
.navbar__menu { 
display:inline-block;
}

.navbar__menu li {
display:inline-block;
list-style: none;

}

<div class="header">
    <div class="navbar">
        <div class="navbar__brand">
        <a href=#> <img src="../img/logo.png"> </a>
        </div>
        <div class="navcontainer">
          <ul class="navbar__menu">
              <li><a href=#>Item 1</a></li>
              <li><a href=#>Item 2</a></li>
          </ul>
        </div>
    </div>
</div>

I want the image in navbar__brand to be vertical align in the middle; At this moment is align at the top of the div.

I need to support old IE browser so please no flex.

before saying this is not a duplicate, please go through ALL the answers/ comments, related link,etc ... don't stick to accepted ones! — Temani Afif, Mar 21 '18 at 12:29

score 1 · Accepted Answer · answered Mar 21 '18 at 12:39

The easiest way to achive this is simulating a table

.asTable{
display:table;
}

.asTR{
display:table-row;
}

.asTD{
display:table-cell;
vertical-align:middle;
border:1px solid;
}
.asTD ul{
list-style:none;
}

.asTD ul li {
display:inline-block;
}

<div class="asTable">
    <div class="asTR">
        <div class="asTD">
          <a href=#> <img src="../img/logo.png"> </a>
        </div>
        <div class="asTD">
          <ul class="">
              <li><a href=#>Item 1</a></li>
              <li><a href=#>Item 2</a></li>
          </ul>
        </div>
    </div>
</div>

Jeremy Thille · Answer 2 · 2018-03-21T12:22:21.617

0

(Edit) Thanks @TemaniAfif for pointing out that you need to support old IE browsers. This answer won't work in old browsers.

As usual, what is a pain to achieve with classic CSS (floats, inline-block, clearfix, etc.) is a breeze with Flex :

.navbar {
  display: flex;
  align-items: center;
  border: blue dashed 2px;
}

ul.navbar__menu {
  display: flex;
}

.navbar__menu li {
  list-style: none;
  padding: 10px;
}

<div class="navbar">
  <div class="navbar__brand">
    <a href=#> <img src="../img/logo.png"> </a>
  </div>

  <ul class="navbar__menu">
    <li><a href=#>Item 1</a></li>
    <li><a href=#>Item 2</a></li>
  </ul>
</div>

edited Mar 21 '18 at 12:22

answered Mar 21 '18 at 12:15

Jeremy Thille

26,047
12
43
63

at the end he said **support old IE browser** – Temani Afif Mar 21 '18 at 12:19
Ah, that's right. Too bad. We're not supposed to do that, so I guess I'll just take back my answer then. – Jeremy Thille Mar 21 '18 at 12:20

Align Image in the middle of a floated element, that gets parent height

2 Answers2