Css在导航栏旁边对齐图像

Question

我尝试对齐<img>代码和<nav>。我试着给他们两个

display:inline-block;

但是没有结果......

Preventing form submission after validation by parsley.js

这是我的笔。

如果有人可以在不使用Table代码的情况下解释如何对齐代码，我会很高兴。

感谢。

Answer 1

您需要设置为.logo，vertical=align: middle。这是解决方案：

*
{
  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>

Answer 2

这会将图像对齐到菜单的左侧，并留下5px的空间。

#menu .logo
{
  position: absolute;
display:inline-block;
  border-radius:50%;  
  float: left;
  left: 5px;
}