Center text within a fixed CSS HTML header

Question

Center text within a fixed CSS HTML header

Navigation

#1 by (2 votes)

0

I do not know what to do, but I can not seem to get the text out of my menu (it's a little lower than up), I've tried padding, align: center, margin, Please answer please take the time to see the code, I wanted an explanation that I learn, thank you for the attention

html html5 css layout align

asked by anonymous 13.09.2018 / 19:46

1 answer

How can I improve my gamer gaming code? Detect scroll when start and end of div with jquery

score 2 · Accepted Answer

Mark as you even asked for a bit of attention and explanation you should at least stop 1 minute to give feedback to the respondent. I have already seen that you have more than 5 open questions on the site and did not bother to pay attention to who answers you. So before you ask for attention, you should also consider the side of those who stopped to answer you!

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

OBS: If you want to take the test, simply increase the height of the class .cabecalho you will see that it becomes even more decentralized 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><bodyclass="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><liclass="im">
          <a href="../index.html"><img class="icon" src="http://placeskull.com/100/100"><br>ManuaiseProcessos</a></li><liclass="im">
          <a href="../index.html"><img class="icon" src="http://placeskull.com/100/100"><br>Equipamentos</a></li><liclass="im">
          <a href="../index.html"><img class="icon" src="http://placeskull.com/100/100"><br>Inventário</a></li></ul></nav></header><divid="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>