Centralize text within a fixed HTML CSS header

Question

Centralize text within a fixed HTML CSS header

Guys it may seem silly, but I can not Center the text of my menu(it is a little more down than up), I have tried padding, align: center, margin, I do not know why this happens, who is to answer please take a while to see the code, I wanted an explanation that I learn, thank you very much for the attention

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

0

html css html5 layout align

Author: Marcos Aurélio, 2018-09-13

Source

1 answers

score 2 · Accepted Answer

milestones like you even asked for a little attention and explanation you should at least stop 1 minute to give feedback to those who answer you. I've seen that you have more than 5 open questions on the site and did not bother to give attention to those who answer you. So before asking for attention also think about the side of who stopped to answer you!

That said, your problem is with the height of the .cabecalho, when you set a height for that element ends there is an "imbalance" between the upper and lower padding, for the simple fact that your .cabecalho is not centralizing what is inside it on the vertical axis. The most practical way to solve this is by taking the height of the .cabecalho, so the paddings are balanced and the H1 inside the .cabecalho is centralized.

Note: if you want to take the test, just increase the height of the Class .cabecalho that you will see that it becomes even more decentralized the 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>