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

これは、メニューの左にある画像をallignとの間に5pxののスペースを残します：ここでのソリューションです。

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