如何让文本自动居中？

Question

I'm developing a project, and I have a bar at the top, with two logos and a text centered in the middle written "Autenticação", but this text is centered by eye, as I do to centralize this text in the center of the bar automatically? I've tried in many ways and I can't, if anyone knows, please help me!

Code:

 *{ margin: 0; padding: 0; } .logos-container{ border-bottom: solid 1px #cdd1d3; box-shadow: 0px 3px 5px -1px rgba(50, 50, 50, 0.35); margin-top: 10px; } .logomin{ width: 245px; } .logoaetr{ width: 145px; display: inline; } .logos-container ul{ margin-left: 10%; list-style: none; } .logos-container ul li{ display: inline-block; } .logos-container ul li:nth-child(3){ vertical-align: top; margin: 15px 300px; text-transform: uppercase; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 18px; text-align: center; color: #001C44; } .loginContainer{ background: url("https://i.ibb.co/NnfNFJ1/fatura.png") no-repeat; background-size: 24%; height: 43vw; background-position-y: 20px; width: 100%; } .footer ul li{ display: inline-block; } .footer ul li a{ padding: 0px 10px; text-decoration: underline; color: #9B9B9B; } .footer ul li ap{ font-family: 'Roboto', sans-serif; font-size: 14px; line-height: 24px; font-weight: 300; margin-left: 50px; } .footer{ background: #f5f5f5; } .footer ul{ list-style: none; }

 <div class="page"> <div class="logos-container"> <ul> <li><img src="https://i.ibb.co/njPs6xJ/min.png" class="logomin" alt="Ministerio da Educação" /></li> <li><img src="https://i.ibb.co/mcKb85g/aetr.png" class="logoaetr" alt="Agrupamento de Escolas Tomaz Ribeiro" /></li> <li><h2>Autenticação</h2></li> </ul> </div> <div class="loginContainer"> <p>&nbsp;</p> </div> <footer class="footer"> <ul> <li><a href="https://google.pt/"><p>Esqueceu a sua senha?</p></a></li> <li><p>Versão: 1.0</p></li> </ul> </footer> </div>

Answer 1

It sounds like you're wanting (since it's unclear between the picture and description) something more like this. Also cleaned up your syntax errors and semantic structure issues. Cheers!

 *{ margin: 0; padding: 0; box-sizing: border-box; } .logos-container { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: left; padding: 0 2rem; text-transform: uppercase; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 1rem; text-align: center; color: #001C44; border-bottom: solid 1px #cdd1d3; box-shadow: 0px 3px 5px -1px rgba(50, 50, 50, 0.35); margin-top: 10px; } .logos-container img { height: 3rem; } .logos-container h2 { flex: 1; } .loginContainer{ background: url("https://i.ibb.co/NnfNFJ1/fatura.png") no-repeat left 20px; background-size: 24%; height: calc(100vh - 5.25rem); } .footer { font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 300; padding: 0 2rem; background: #f5f5f5; } .footer a { text-decoration: underline; color: #9B9B9B; }

 <div class="page"> <div class="logos-container"> <img src="https://i.ibb.co/njPs6xJ/min.png" class="logomin" alt="Ministerio da Educação"> <img src="https://i.ibb.co/mcKb85g/aetr.png" class="logoaetr" alt="Agrupamento de Escolas Tomaz Ribeiro"> <h2>Autenticação</h2> </div> <div class="loginContainer"> <p>&nbsp;</p> </div> <div class="footer"> <a href="https://google.pt/">Esqueceu a sua senha?</a> <span>Versão: 1.0</span> </div> </div>

Answer 2

Try this (HTML the same):

https://jsfiddle.net/cLdpmhbv/

*{
  margin: 0;
  padding: 0;
}
.logos-container{
  border-bottom: solid 1px #cdd1d3;
  box-shadow: 0px 3px 5px -1px rgba(50, 50, 50, 0.35);
  margin-top: 10px;
}
.logomin{
  width: 245px;
}
.logoaetr{
  width: 145px;
  display: inline;
}
.logos-container ul{
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.logos-container ul li{
  display: inline-block;
}
.logos-container ul li:nth-child(1),
.logos-container ul li:nth-child(2){
    flex-basis: 10%;
}

.logos-container ul li:nth-child(3){
  flex-basis: 80%;
  transform: translateX(-20%);
  text-transform: uppercase;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  color: #001C44;
}
.loginContainer{
  background: url("https://i.ibb.co/NnfNFJ1/fatura.png") no-repeat;
  background-size: 24%;
  height: 43vw;
  background-position-y: 20px;
  width: 100%;
}
.footer ul li{
  display: inline-block;  
}
.footer ul li a{
  padding: 0px 10px;
  text-decoration: underline;
  color: #9B9B9B;
}
.footer ul li a p{
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-weight: 300;
  margin-left: 50px;
}
.footer{
  background: #f5f5f5;
}
.footer ul{
  list-style: none;
}