CSS Padding do CSS não funciona

kkcaio · 22 de maio de 2022

Olá amigos, tive mais um problema que me empacou no CSS.

O problema desta vez é com o alinhamento da minha logo, no que será o cabeçalho desse site.

1 - Como devia ficar

2 - Como fica

No caso, a configuração de alinhamento que desejo é que fique no meio (em altura), porém não funciona, o comando padding, no qual estava usando para tentar este afastamento não funciona. Novamente estou perdido, e sem palpite do erro.

.logo {
    padding: 16 px;
}

Caso necessário, esta é a parte do código sobre a logo:

HTML:

<body>
    <header class="menu-principal">
        <main>
            <div class="cabecalho">
                <div class="logo">
                    <img src="https://images2.imgbox.com/d7/9d/56d327vT_o.png" width="80"/>  
                </div>

CSS:

body {
    width: 100%;
    height: 100%;
}
.menu-principal {
  	background-color: #181818;
    width: 100%;
    height: 60px;
}
main {
    margin: 0 auto;
    width: 980px;
    position: relative;
}
.logo {
    padding: 16 px; <!--!!!!!!-->
}

Me ajudem, por favor amigos!

Matheus Dutra · 22 de maio de 2022

Tente isso:

.logo {  
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 16px;
  }

A parte que eu acrescentei, é para centralizar a imagem dentro da div, por isso o 50%/50%, você poderia colocar em várias posições alterando essas porcentagens.

A sim, no meu computador deu certo deixar apenas o padding para deixar um espaço da altura. Não é em todos os casos, mas em 99% dos casos o problema é erro de digitação.

Caso queira ver o meu código para comparar.

HTML:

<!DOCTYPE html>
<head> 
    <meta charset="UTF-8">   
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header class="menu-principal">

    <div class="cabecalho">

        <main>

        <div class="logo">
            <img src="a.png" width="80"/>  
        </div>

    </main>

    </div>

    </header>

</body>
</html>

CSS:

body {
    width: 100%;
    height: 100%;
}
.menu-principal {
  	background-color: #181818;
    width: 100%;
    height: 60px;
}
main {
    margin: 0 auto;
    width: 980px;
    position: relative;
}

.logo {  
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 16px;
  }