Center the page horizontally html css

Question

Center the page horizontally html css

Navigation

#1 by (2 votes)

-1

How to horizontally center my logo, this arrow is not very horizontally centered, I wanted it to be ... Can anyone help me? I tried the top: 50% and it did not work ...

@charset "UTF-8";
html {
  overflow-y: scroll;
}
.postagem {
	background-color: rgba(255,140,40,.05);
	margin: 0px;
}
#interface {
	width: 1200px;
	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: 38px;
	background-color: rgba(255,140,40,1);
	margin-bottom: 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;
	/*display: inline-block;*/
}
#fcor {
	color: rgba(255,220,180,1);
}
.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: 300px;
	width: 300px;
}
#flecha {
	left: 10px;
	position: absolute;	
	margin: 0px 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(){vary=$(this).scrollTop();if(y<25){$('.cabecalho').css({'padding-top':'20px','padding-bottom':'20px'});}else{$('.cabecalho').css({'padding-top':'6px','padding-bottom':'3px'});}});</script></head><bodyclass="postagem">
		<header class="cabecalho">
			<a href="1009182.html"><img id="flecha"src="https://image.ibb.co/hR4xh9/flecha.png"></a><h1class="logo">MANUAIS E PROCESSOS<span id="fcor"> INFORMÁTICA<span><h1/>
		</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="https://image.ibb.co/fNqEUp/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="https://image.ibb.co/jP7Hh9/renomear2.jpg"><br>
			</p>
		<article>
	</div>
</body>
</html>

html css layout align vertical-align

asked by anonymous 12.09.2018 / 16:14

1 answer

The page can not be displayed due to an internal server error How to remove the input type="reset" border without removing my border made in css?

score 2 · Accepted Answer

I suggest you read in this guide of Flex Container , where you will have several examples of centralization.

Below is the code, I used justify-content: center and align-items: center to center horizontally and vertically the <div> of each element. I also used flex-grow to determine the size that each will occupy, leaving a small space for the arrow and the rest of the area for the logo:

$(document).scroll(function(){
  var y = $(this).scrollTop();
  if (y < 25) {
    $('.cabecalho').css({'padding-top': '20px','padding-bottom': '20px'});
  }
  else {
    $('.cabecalho').css({'padding-top': '6px', 'padding-bottom': '6px'});
  }
});

@charset "UTF-8";
html {
  overflow-y: scroll;
}
.postagem {
	background-color: rgba(255,140,40,.05);
	margin: 0px;
}
.cabecalho {
	transition: 0.2s;
	position: fixed;
	width: 100%;
	height: 38px;
	padding-bottom: 20px;
	padding-top: 20px;
	background-color: rgba(255,140,40,1);
	margin-bottom: 0px;
	display: flex;
	align-items: center;
}	
.logo {
	color: rgba(255,255,255,1);
	font-family: agency fb;
	font-size: 20pt;
}
#fcor {
	color: rgba(255,220,180,1);
}
.seta{
	flex-grow: 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.letras{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>teste</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head><bodyclass="postagem">
  <header class="cabecalho">
    <a href="1009182.html">
      <div class="seta">
        <img src="https://image.ibb.co/hR4xh9/flecha.png"></div></a><divclass="letras">
      <h1 class="logo">MANUAIS E PROCESSOS<span id="fcor"> INFORMÁTICA </span></h1>
    </div>
  </header>
</body>
</html>