Css 对齐导航栏旁边的图像

Question

我正在尝试对齐 <img> 标签和 <nav>。我试着给他们两个

display:inline-block;

但是没有结果...

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

这是我的笔。

如果有人能向我解释如何在不使用 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

这会将图像与菜单的左侧对齐，并在两者之间留出 space 5 像素。

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

Css 对齐导航栏旁边的图像

Css align image beside navigation bar

css

position

alignment