徽标与菜单导航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

只需将img {vertical-align:middle}放入css即可...

如果要为图像设置宽度和高度，则必须在img规则中设置它们

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将表用于父（.btn-header）和表格单元格以及vertical-align：middle to child（.btn-header img，.btn-header a）

.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>

Answer 3

添加此css

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

Fiddle