Center text within a fixed HTML CSS header

Asked

Viewed 932 times

0

Guys may seem silly, but I can’t center the text of my menu(It’s a little lower than up), I’ve tried padding, align: center, margin, I don’t know why this happens, who will answer please take the time to see the code, i wanted an explanation I learn, thank you very much for the attention <3 Obs*: This only when I hide the images with 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>

html css html5 layout align

  • Are you referring to the H1 texts? Text centering errors usually happen due to the lack of display block in the text element, or if you used display-inline, always seek to use vertical-align: top together.

1 answer

2


Mark as yourself asked for a little attention and explanation you should at least stop 1 minute to give feedback to who answers you. I’ve seen that you have more than 5 open questions on the site and you haven’t bothered to pay attention to who answers you. So before you ask for attention, think also of the side that stopped to answer you!

That said, your problem is with height of .cabecalho, when you define a time for this element there ends up being an "imbalance" between the padding superior and inferior, for the simple fact of its .cabecalho not be centering what is inside it on the vertical axis. The most practical way to solve this and taking away the height of the .cabecalho, so the paddings are balanced and the H1 within the .cabecalho is centralized.

OBS: If you want to take the test, just increase the height of the class .cabecalho that you will see that it gets 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>

  • I still don’t have enough reputation to give feedback, but I went to the other post and replied and commented thanking, I’m new on the forum... And the problem has not been solved, inside the header has a side menu(In your code it doesn’t even appear) and this menu is like inline block, but when I decrease the padding it n is inside the header, it is further down the header...

  • https://i.stack.Imgur.com/Rubtq.png

  • I could find the problem but I don’t know how to solve it, I use <br> to break the font down and the image up, then I hide the image and it’s just the <br>

  • @Marcosaurélio guy I was even trying to mess with his code, but I’m finding him a little confused, it would be very good to take a little time to study the attributes Position and Display CSS, these are the main attributes that you need to know to assemble any layout. Please read this link https://answall.com/questions/189978/qual-a-diferen%C3%A7a-entre-padding-e-margin-no-css. For 1 hour to study can save you several hours work in the future, and you will learn fast because they are fundamentals you use all the time

  • If you think about working with Web etc, this tip will help you a lot! Youtube has a lot of material too, with videos and examples practical and easy to understand. Good luck there. And try to focus on more specific questions, then you will gradually learn every part of your problem.

Browser other questions tagged html css html5 layout align

You are not signed in. Login or sign up in order to post.