导航栏旁边的CSS对齐图像答案

【问题标题】：Css align image beside navigation bar导航栏旁边的CSS对齐图像
【发布时间】：2016-07-13 20:00:29
【问题描述】：

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

display:inline-block;

但是没有结果...

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

这是我的笔。

如果有人能解释我如何在不使用Table 标签的情况下对齐标签，我将非常高兴。

谢谢。

【问题讨论】：

试试img{vertical-align:middle;}
你的意思是垂直对齐？
寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、特定问题或错误以及重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。见：minimal reproducible example

标签： css position alignment

【解决方案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>

【讨论】：

【解决方案2】：

这会将图像对齐到菜单的左侧，并在两者之间留出 5px 的空间。

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

【讨论】：