Как автоматически центрировать текст?

Question

Я занимаюсь разработкой проекта, и у меня вверху есть панель с двумя логотипами и текстом в центре, написанным «Autenticação», но этот текст центрируется на глаз, как я делаю, чтобы централизовать этот текст в центр бара автоматически? Я пытался разными способами, и я не могу, если кто-нибудь знает, пожалуйста, помогите мне!

Код:

*{
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 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;
}

        <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

Звучит так, будто вы хотите (так как между картинкой и описанием неясно) что-то более похожее на это. Также исправлены ваши синтаксические ошибки и проблемы со структурой semanti c. Ура!

*{
  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

Попробуйте это (HTML то же самое):

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;
}