Css align image beside navigation bar

Question

I'm trying to align the <img> tag and the <nav>. I tried to give them both

display:inline-block;

but there are no results for that...

http://codepen.io/anon/pen/QEgpzP

This is my pen.

I'll be very glad if someone can explain me how to align the tags without using the Table tag.

Thanks.

Answer 1

You need set to .logo, vertical=align: middle. Here is solution:

*
{
  margin:0;
  padding:0;
  text-align:center;
  
}

body
{
  direction:rtl;
  font-size:100%;
  background-color:#dfdfdf;
}

#menu div
{

  width:80%;
  margin:0 auto;
}
#menu
{
  width:100%;
  background-color:#339966;
  direction:rtl;
  font-size:1.8em;   

}

#menu .logo
{
display:inline-block;
  vertical-align: middle;
  border-radius:50%;  
}
#menu ul
{
  display:inline-block;
  width:50%;
  background-color:red;
  font-size:0;

 
}
#menu i
{
  font-size:0.9em;
}

#menu li
{
  white-space:nowrap;
 padding:10px 0;
display:inline-block;
width:25%;
  font-size:30px;

}
#menu li a
{ 
  transition:all 0.3s;
  padding-bottom:8px;
  cursor:pointer;
}
#menu li a:hover
{
  border-bottom:3px solid brown;
  
}

<nav id="menu">

  <div>
<img  class="logo" src="https://placehold.it/100x100"></img>
<ul> 
    <li><a><i class="fa fa-picture-o" aria-hidden="true"></i>  גלרייה  </a> </li>
      <li><a><i class="fa fa-picture-o" aria-hidden="true"></i>  גלרייה  </a> </li>
      <li><a><i class="fa fa-picture-o" aria-hidden="true"></i>  גלרייה  </a> </li>
     <li><a><i class="fa fa-picture-o" aria-hidden="true"></i>  גלרייה  </a> </li>

  </ul>
  <div>
</nav>