Center two divs with text

Question

Center two divs with text

Navigation

#1 by (1 votes)

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, he is not centralizing the two divs with the texts:

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

How to proceed?

css

asked by anonymous 04.08.2014 / 20:47

1 answer

Routes of Codeigniter Ajax is returning an array and now, how to separate?

score 1 · Accepted Answer

Understand that if you do not set a width for the div and set it to float: left; , it will be the size of your content, so you can not centralize if there is not enough room left for it ...

Another problem is that setting float: left; has a certain priority with text-align: center; , one does not do very well with the other ...

Place the keyword inside the div, in a span (which is in-line 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>