Galera pode parecer bobo, mas não consigo centralizar o texto do meu menu(Ele fica um pouco mais pra baixo do que pra cima), já tentei padding, align: center, margin, não sei o por que disso acontecer, quem for responder por favor tire um tempo pra ver o código, eu queria uma explicação que eu aprenda, muito obrigado pela atenção <3 Obs*: Isso só quando eu escondo as imagens com jQuery.
@charset "UTF-8";
html {
overflow-y: scroll;
}
.postagem {
background-color: rgba(255,140,40,.05);
margin: 0px;
font-family: arial;
}
#interface {
width: 1100px;
background-color: white;
margin: 90px auto 10px auto;
box-shadow: 0px 4px 6px 3px rgba(0,0,0,.1);
}
.cabecalho {
transition: 0.2s;
top: 0px;
position: fixed;
width: 100%;
height: 35px;
background-color: rgba(255,140,40,1);
margin: 0px;
padding-bottom: 20px;
padding-top: 20px;
text-align: center;
}
.logo {
margin: 0px 0px 0px 0px;
color: rgba(255,255,255,1);
font-family: agency fb;
font-size: 20pt;
}
#fcor {
color: rgba(255,220,180,1);
}
/*Menu*/
.menu {
display: block;
}
.menu h1 {
display: none;
}
.mn {
position: absolute;
list-style: none;
text-transform: uppercase;
top: -20px;
left: -40px;
}
.icon{
}
.im a {
text-decoration: none;
color: white;
}
.im {
color: white;
font-size: 14pt;
transition: 0.3s;
font-family: "Agency FB";
padding: 12px;
margin: 0px;
background-color: rgba(255,140,40,0);
display: inline-block;
justify-content: center;
align-items: center;
}
.im:hover {
transition: 0.2s;
background-color: rgba(247,136,5,1);
}
/*Postagens*/
.artigo {
padding: 15px 25px 15px 25px;
}
.titulo {
font-family: arial;
font-size: 12pt;
color: rgba(0,0,0,.8);
margin: 0px 0px 5px 0px;
padding: 0px;
}
.paragrafo {
margin: 0px;
padding: 0px;
color: rgba(0,0,0,.6);
font-family: arial;
text-align: justify;
}
.li {
font-size: 20pt;
font-weight: 900;
}
.link {
color: black;
text-decoration: none;
}
.link:hover {
font-style: none;
text-decoration: underline;
}
.icone {
transition: 2s;
border: solid white 6px;
box-shadow: 4px 4px 6px 2px rgba(0,0,0,0.1);
height: 400px;
width: 600px;
}
#flecha {
left: 10px;
position: absolute;
margin: 3px 0px 0px 0px;
}
/*Folhas de estilo de tabela*/
.tabela {
border-collapse: collapse;
}
.tdn {
border: solid black 2px;
padding: 2px;
}
.vazio {
border: solid black 2px;
padding: 12px;
}
.vazio#vm {
padding: 36px;
}
.tabt {
background-color: white;
padding: 2px;
border: solid black 2px;
}
.subt {
background-color: lightgray;
padding: 2px;
border: solid black 2px;
}
.ft {
border: solid black 2px;
}
.asst {
padding: 12px;
font-weight: 900;
text-align: center;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../_css/estilo.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y < 25) {
$('.cabecalho').css({'padding-top': '20px','padding-bottom': '20px'});
$('.im').css({'padding': '12px'});
$('.icon').css({'display': 'inline-block'});
} else {
$('.cabecalho').css({'padding-top': '5px', 'padding-bottom': '0px'});
$('.im').css({'padding-top': '0px','padding-bottom': '0px'});
$('.icon').css({'display': 'none'});
}
});
</script>
</head>
<body class="postagem">
<header class="cabecalho">
<h1 class="logo">MANUAIS E PROCESSOS<span id="fcor"> INFORMÁTICA<span></h1>
<nav class="menu">
<h1>Menu Principal</h1>
<ul class="mn">
<li class="im"><a href="../index.html"><img class="icon" src="../_imagens/icasa.png"><br>Home</a></li>
<li class="im"><a href="../index.html"><img class="icon" src="../_imagens/ilivro.png"><br>Manuais e Processos</a></li>
<li class="im"><a href="../index.html"><img class="icon" src="../_imagens/iferramentas.png"><br>Equipamentos</a></li>
<li class="im"><a href="../index.html"><img class="icon" src="../_imagens/ietiqueta.png"><br>Inventário</a></li>
<ul>
</header>
<div id="interface">
<article class="artigo">
<h1 class="titulo">INSTALANDO SISTEMA OPERACIONAL</h1>
<p class="paragrafo">
<!--...<a class="link" href="F:\Campo Florido\Compartilhados\Informática\Comuns\planilha-modelo-formatacao.xlsx" download>Baixar o documento modelo de formatação em computadores</a><br>-->
<span class="li">1.</span> Clique com o lado direito na bandeira do Windows ou use o atalho(Windows+X) para abrir o menu abaixo, nele escolha a opção "Sistema".<br><img src="../_imagens/renomear1.jpg" class="icone"><br>
<span class="li">2.</span> Vá em "Renomear este computador" e coloque o nome da etiqueta do computador, após isso será necessário reiniciar o computador.<br><img class="icone" src="../_imagens/renomear2.jpg"><br>
</p>
<article>
</div>
</body>
</html>