標誌有不同的高度比菜單導航CSS

我試圖把一個標誌旁邊的導航菜單，但它似乎是一個不同的高度。我一直在嘗試添加邊距填充等，但我錯過了一些東西。我開始玩CSS，所以任何幫助將不勝感激！標誌有不同的高度比菜單導航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>

來源

2017-10-17 Alex

不知道你可能已經嘗試了什麼，但是你可以嘗試在包含父元素'＃header'上聲明'vertical-align：bottom' - 這些元素都應該是內聯元素，但它的外觀是 – UncaughtTypeError

添加此CSS

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

Fiddle

來源

2017-10-17 11:48:30 Znaneswar

謝謝！最快的方式！ – Alex

只是把img {vertical-align:middle}在CSS中，它應該工作...

如果你想設置寬度和高度，你必須設置圖像他們在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>

來源

2017-10-17 11:39:34 DaFois

它是與其他列表項目重疊 – Hamzaouiii

@Hamzaouiii在「整頁」視圖中看起來很好 – UncaughtTypeError

！該頁面在任何視圖中都應該看起來不錯，不僅僅是完整的頁面 – Hamzaouiii

用表以父（.btn頭）和表單元格和垂直對齊：中間的孩子（.btn頭IMG，.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>

來源

2017-10-17 12:05:18

標誌有不同的高度比菜單導航CSS

回答

相關問題