Estoy tratando de poner un logotipo al lado del menú de navegación, pero parece tener una altura diferente. He estado intentando agregar márgenes de relleno, etc. Pero me falta algo. Estoy empezando a jugar con CSS, por lo que agradecería cualquier ayuda.

Image

.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>
0
Alex 17 oct. 2017 a las 14:34

3 respuestas

La mejor respuesta

Agrega este css

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

Violín

0
Znaneswar 17 oct. 2017 a las 11:48

Use la tabla para el padre (.btn-header) y la celda de la tabla y 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>
1
Nawaz Ghori 17 oct. 2017 a las 12:05

Simplemente ponga img {vertical-align:middle} en el CSS y debería funcionar ...

Si desea establecer el ancho y la altura de la imagen, debe establecerlos en la regla 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>
2
DaFois 17 oct. 2017 a las 11:39