Center two Ivs with text

Asked

Viewed 141 times

1

I have the following structure:

HTML

<div class="contatoTopo">
  <div class="buscaConteudoCent">           
    <div class="buscaFontEncontraTit">Nenhum resultado encontrado para:</div>
    <div class="buscaFontEncontra">"teste"</div>
  </div>
</div>

CSS

    .contatoTopo{
      background-image: url('../imagens/contatoBG.jpg');
      background-repeat: repeat;
      height: 176px;
      line-height: 176px;
      margin: auto;
      width: 100%;
  }
.buscaConteudoCent {
  width: 960px;
  height: 100px;
  margin: auto;
  position: absolute;
  left: 50%;
  margin-left: -480px;
}
.buscaFontEncontraTit {
  font-family: 'ubuntulight_italic';
  font-size: 30px;
  color: white;
  text-align: center;
  margin: auto;
  float: left;
}
.buscaFontEncontra {
  color: #FFFFFF;
  font-family: 'ubuntubold_italic';
  font-size: 30px;
  text-align: center;
  float: left;
}

What is happening, it is not centering the two Ivs with the texts: inserir a descrição da imagem aqui

The word 'test' is an example, it will come from the system and may be larger, so I can’t centralize.

How to proceed?

1 answer

1


Understand that if you do not set a width for the div and set as float: left;, it will be the size of its content, so there’s no way to center if there’s no room left for it...

Another problem is that when defining the float: left; this has a certain priority to text-align: center;, One doesn’t get along with the other...

put the keyword inside the div, in a span (which is online by nature) to define the class, and remove the floats.

CSS

 .contatoTopo{
      background-image: url('../imagens/contatoBG.jpg');
      background-repeat: repeat;
      height: 176px;
      line-height: 176px;
      margin: auto;
      width: 100%;
  }
.buscaConteudoCent {
  width: 960px;
  height: 100px;
  margin: auto;
  position: absolute;
  left: 50%;
  margin-left: -480px;
}
.buscaFontEncontraTit {
  font-family: 'ubuntulight_italic';
  font-size: 30px;
  color: white;
  text-align: center;
  margin: auto;
}
.buscaFontEncontra {
  color: #FFFFFF;
  font-family: 'ubuntubold_italic';
  font-size: 30px;
}

HTML

<div class="contatoTopo">
  <div class="buscaConteudoCent">           
    <div class="buscaFontEncontraTit">Nenhum resultado encontrado para: <span class="buscaFontEncontra">"teste"</span></div>
  </div>
</div>

Browser other questions tagged

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