ロゴの高さがメニューナビと異なるCSS

Question

ナビゲーションメニューの隣にロゴを入れようとしていますが、高さが異なるようです。私は余白を追加しようとしていたパディングなどしかし、私は何かが欠けている。私はCSSで遊ぶようになっているので、どんな助けもありがとう！

.btn-header a{ 
 
    color:#999; 
 
    background:rgba(0, 0, 0, 0.5); 
 
    padding:10px 20px; 
 
    font-size:12px; 
 
    text-decoration:none; 
 
    letter-spacing:2px; 
 
    text-transform:uppercase; 
 
} 
 

 
.btn-header .icon { 
 
    display: none; 
 
} 
 

 
.btn-header a:hover{ 
 
    border:none; 
 
    background:rgba(0, 0, 0, 0.4); 
 
    background:#fff; 
 
    padding:20px 20px; #000; 
 
    color:#1b1b1b; 
 
} 
 

 
.btn-header img{ 
 
    display: inline-block; 
 
} 
 
.footer{ 
 
    font-size:8px; 
 
    color:#fff; 
 
    clear:both; 
 
    display:block; 
 
    letter-spacing:5px; 
 
    border:1px solid #fff; 
 
    padding:5px; 
 
    text-decoration:none; 
 
    width:210px; 
 
    margin:auto; 
 
    margin-top:400px; 
 
}

<div id="header" class="btn-header"> 
 
     <img src="http://via.placeholder.com/50x50" height="50" width="50"/> 
 
     <a href="#" >Como funciona</a> 
 
     <a href="#" >Blog</a> 
 
     <a href="#" >Tienda</a> 
 
     <a href="#" >Trabaja con nosotros</a> 
 
     <a href="#" >Reparar</a><a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a> 
 
    </div>

Answer 1

親（.btnヘッダ）に

#header{ 
display:flex; 
align-items:center; 
} 

Fiddle

Answer 2

だけCSSでimg {vertical-align:middle}を入れて、それが動作するはずです...

あなたがイメージの幅と高さを設定したい場合は、設定する必要がありますそれらはimgルールの中にあります

.btn-header a{ 
 
    color:#999; 
 
    background:rgba(0, 0, 0, 0.5); 
 
    padding:10px 20px; 
 
    font-size:12px; 
 
    text-decoration:none; 
 
    letter-spacing:2px; 
 
    text-transform:uppercase; 
 
} 
 
img {vertical-align:middle; width: 150px; height; 150px} 
 

 
.btn-header .icon { 
 
    display: none; 
 
} 
 

 
.btn-header a:hover{ 
 
    border:none; 
 
    background:rgba(0, 0, 0, 0.4); 
 
    background:#fff; 
 
    padding:20px 20px; #000; 
 
    color:#1b1b1b; 
 
} 
 

 
.btn-header img{ 
 
    display: inline-block; 
 
} 
 
.footer{ 
 
    font-size:8px; 
 
    color:#fff; 
 
    clear:both; 
 
    display:block; 
 
    letter-spacing:5px; 
 
    border:1px solid #fff; 
 
    padding:5px; 
 
    text-decoration:none; 
 
    width:210px; 
 
    margin:auto; 
 
    margin-top:400px; 
 
}

<div id="header" class="btn-header"> 
 
     <img src="http://via.placeholder.com/50x50" height="50" width="50"/> 
 
     <a href="#" >Como funciona</a> 
 
     <a href="#" >Blog</a> 
 
     <a href="#" >Tienda</a> 
 
     <a href="#" >Trabaja con nosotros</a> 
 
     <a href="#" >Reparar</a><a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a> 
 
    </div>

Answer 3

用テーブルとテーブルセルと垂直整列このCSSを追加する：子に中間（.btnヘッダIMG、A .btnヘッダ）

.btn-header a{ 
 
    color:#999; 
 
    background:rgba(0, 0, 0, 0.5); 
 
    padding:10px 20px; 
 
    font-size:12px; 
 
    text-decoration:none; 
 
    letter-spacing:2px; 
 
    text-transform:uppercase; 
 
} 
 

 
.btn-header .icon { 
 
    display: none; 
 
} 
 

 
.btn-header a:hover{ 
 
    border:none; 
 
    background:rgba(0, 0, 0, 0.4); 
 
    background:#fff; 
 
    padding:20px 20px; #000; 
 
    color:#1b1b1b; 
 
} 
 
.btn-header { display: table;} 
 
.btn-header img{ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.btn-header a {display: table-cell; 
 
vertical-align: middle;} 
 
.footer{ 
 
    font-size:8px; 
 
    color:#fff; 
 
    clear:both; 
 
    display:block; 
 
    letter-spacing:5px; 
 
    border:1px solid #fff; 
 
    padding:5px; 
 
    text-decoration:none; 
 
    width:210px; 
 
    margin:auto; 
 
    margin-top:400px; 
 
}

<div id="header" class="btn-header"> 
 
     <img src="http://via.placeholder.com/50x50" height="50" width="50"/> 
 
     <a href="#" >Como funciona</a> 
 
     <a href="#" >Blog</a> 
 
     <a href="#" >Tienda</a> 
 
     <a href="#" >Trabaja con nosotros</a> 
 
     <a href="#" >Reparar</a><a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a> 
 
    </div>