0

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>

1
  • Voce esta se referindo aos textos do h1? Erros de centralizacao de texto geralmente acontecem pela falta do display block no elemento dos textos, ou se utilizou display-inline, sempre busque utilizar juntamente o vertical-align: top.
    – Sabrina B.
    Commented 13/09/2018 às 17:59

1 Resposta 1

2

Marcos como vc mesmo pediu um pouco de atenção e explicação vc deveria ao menos parar 1 minuto para dar um feedback para quem te responde. Já vi que vc tem mais de 5 perguntas abertas no site e não se deu ao trabalho de dar uma atenção para quem te responde. Então antes de pedir por atenção pense também no lado de quem parou para te responder!

Dito isso, o seu problema é com o height do .cabecalho, quando vc define uma altura para esse elemento acaba havendo um "desequilíbrio" entre o padding superior e inferior, pelo simples fato do seu .cabecalho não estar centralizando o que está dentro dele no eixo vertical. A forma mais prática para resolver isso e tirando a altura do .cabecalho, assim os paddings ficam equilibrados e o H1 dentro do .cabecalho fica centralizado.

OBS: Se quiser tirar a prova, basta vc aumentar a altura da classe .cabecalho que vc vai ver que fica ainda mais descentralizado o H1

$(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'
    });
  }
});
@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; seu problema é com essa altura aqui */
  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: 1428px;
}

.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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="http://placeskull.com/100/100"><br>Home</a>
        </li>
        <li class="im">
          <a href="../index.html"><img class="icon" src="http://placeskull.com/100/100"><br>Manuais e Processos</a>
        </li>
        <li class="im">
          <a href="../index.html"><img class="icon" src="http://placeskull.com/100/100"><br>Equipamentos</a>
        </li>
        <li class="im">
          <a href="../index.html"><img class="icon" src="http://placeskull.com/100/100"><br>Inventário</a>
        </li>
      </ul>
    </nav>
  </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="http://placeskull.com/100/100" 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="http://placeskull.com/100/100"><br>
      </p>
    </article>
  </div>
</body>

5
  • Eu ainda não tenho reputação o suficiente para dar feedback, mas fui nos outros post e respondi e comentei agradecendo, sou novo no forum... E o problema não se resolveu, dentro do cabeçalho tem um menu lateral(No seu código ele nem aparece) e esse menu tá como inline block, mas quando eu diminuo o padding ele n fica dentro do cabeçalho, fica mais pra baixo do cabeçalho... Commented 13/09/2018 às 20:40
  • i.sstatic.net/RubTQ.png Commented 13/09/2018 às 20:51
  • Consegui achar o problema mas não sei como resolver, eu uso <br> pra quebrar a fonte pra baixo e a imagem em cima, aí eu escondo a imagem e fica só o <br> Commented 13/09/2018 às 21:00
  • @MarcosAurélio cara eu estava até tentando mexer no seu código, mas estou achando ele meio confuso, seria muito bom vc parar um tempinho para dar uma estudada nos atributos Position e Display do CSS, esses são os principais atributos que vc precisa saber para montar qualquer layout. Aproveite e leia esse link pt.stackoverflow.com/questions/189978/…. Para 1 hora para estudar pode te poupar várias horas trabalho no futuro, e vc vai aprender rápido pq são fundamentos que vc usa o tempo inteiro
    – hugocsl
    Commented 14/09/2018 às 11:47
  • Se vc pensa em seguir trabalhando com Web etc, essa dica vai te ajudar muito! No youtube tem muito material tb, com vídeos e exemplos prático e fáceis de entender. Boa sorte ai. E tente focar em dúvidas mais específica, ai vc vai aprendendo aos poucos cada parte do seu problema.
    – hugocsl
    Commented 14/09/2018 às 11:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .