Horizontally center the html css page logo

Asked

Viewed 381 times

-1

As I center my logo horizontally, this arrow of mine is not very horizontally centered, I wish it were... Can anyone help me? I tried the top: 50% and it didn’t 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() {
	var y = $(this).scrollTop();
	if (y < 25) {
		$('.cabecalho').css({'padding-top': '20px','padding-bottom': '20px'});
	} else {
		$('.cabecalho').css({'padding-top': '6px', 'padding-bottom': '3px'});
	}
	});
	</script>
</head>
<body class="postagem">
		<header class="cabecalho">
			<a href="1009182.html"><img id="flecha"src="https://image.ibb.co/hR4xh9/flecha.png"></a>
			<h1 class="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

  • The question I had was not about a code itself, but about css and html, if I was going to put the code would have to put the one of all pages to have a comparison... But I already solved it and put another question in place.

  • Is the logo or arrow the problem? What would be the logo? "Horizontally" or "vertically"? The question was very confusing.

1 answer

2


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

Below is the code, I used the justify-content: center and the align-items: center to center horizontally and vertically <div> of each element. I also used the flex-grow to determine the size each will occupy, leaving a small space for the arrow and the entire 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>
<body class="postagem">
  <header class="cabecalho">
    <a href="1009182.html">
      <div class="seta">
        <img src="https://image.ibb.co/hR4xh9/flecha.png">
      </div>
    </a>
    <div class="letras">
      <h1 class="logo">MANUAIS E PROCESSOS<span id="fcor"> INFORMÁTICA </span></h1>
    </div>
  </header>
</body>
</html>

Browser other questions tagged html css layout align vertical-align

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