2

Fiz uma estrutura básica: um wrapper envolvendo 3 divs! Sendo que a primeira flutua para o lado esquerdo, a do meio teria a sua margin definida como 0 auto e a última div flutuando para o lado direito. O problema é que a div que centralizada não está centralizando corretamente. Ela não respeita a div wrapper.

Esta imagem ajuda a explanar o que estou querendo dizer: inserir a descrição da imagem aqui

Inspecionando o elemento, é possível ver que a div do meio não está centralizada em relação a div wrapper. No lado direito, ela se estende até o final, porém, no lado esquerdo, ela é barrada pela div que contém a imagem.

Código:

.centralizar{
  margin: 0 auto;
}
.centralizar-verticalmente{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.wrapper{
  background-color: #00568F;
  width: 100%;
  height: 120px;
}

.logo-esquerdo{
  float: left;
}

.nome-center{
  display: table;
}

.pesquisa-direito{
  float: right;
  margin-right: 10px;
  position: relative;
  bottom: 20px;
}

.pesquisa-direito input{
  width: 200px;
  height: 25px;
  border-radius: 14px;
  padding-left: 20px;
  outline: none;
}
<div class="wrapper">
  <div class="logo-esquerdo">
    <img width=""" height="100" src="http://img2.wikia.nocookie.net/__cb20110405214729/gta/pt/images/b/b6/Copyright.png" alt="Logo Empresa" />
  </div>
  <div class="nome-center centralizar">
    <img width="260" height=""  src="http://2.bp.blogspot.com/-1hoRnbqhvRY/VHhNU3oDftI/AAAAAAAAF0M/GnVOIj9VFLA/s1600/Android_Logo.png" alt="Nome Empresa" />
  </div>
  <div class="pesquisa-direito">
    <input type="texx" placeholder="Pesquise aqui" />
  </div>
</div>

Por favor, além de solucionar o problema, alguém consegue me explicar o que está acontecendo? Grato!

0

2 Respostas 2

2

Isto é porque a propriedade display: table; foi adicionada à class .nome-center. Existe um montão de maneiras de se resolver isto, mas a maneira mais rápida e mais "hacky" de se resolver isso neste caso seria dar um position:absolute; à class logo-esquerdo em vez da propriedade float:left;. Exemplo:

.logo-esquerdo{
    position:absolute;
}

Exemplo online ► http://jsfiddle.net/xuq32udc

Depois mais tarde podes estilizar isto de maneira a que o logo do lado esquerdo não se sobreponha sobre as outras imagens usando media queries para colocar as imagens umas em baixo das outras em ecrãs de pequenas resoluções.

2

Uma outra forma de solucionar (estava testando aqui e agora vi a resposta do Chun (+1), mas vou postar assim mesmo :)) é determinando o tamanho relativo das divs internas, retirando o display:table e o padding-left: 20px;, e alinhar a divcom center no HTML.

O resultado é que a imagem da div do meio fica centralizada. (Não sei se é a melhor prática, mas funciona).

 .wrapper{
    background-color: #00568F;
    width: 100%;
    height: 120px;
    }

    .logo-esquerdo{
    float: left;
    width: 20%
    }

    .nome-center{
    width: 60%;
    margin: 0 auto;
    }

    .pesquisa-direito{
    float: right;
    margin-right: 10px;
    position: relative;
    bottom: 20px;
    width: 20%
    }

    .pesquisa-direito input{
    width: 80%;
    height: 25px;
    border-radius: 14px;
    outline: none;
    }
<div class="wrapper">
        <div class="logo-esquerdo">
            <img height="100" src="http://img2.wikia.nocookie.net/__cb20110405214729/gta/pt/images/b/b6/Copyright.png" alt="Logo Empresa" />
        </div>
        <div class="nome-center" align="center">
            <img width="260" height=""  src="http://2.bp.blogspot.com/-1hoRnbqhvRY/VHhNU3oDftI/AAAAAAAAF0M/GnVOIj9VFLA/s1600/Android_Logo.png" alt="Nome Empresa" />
        </div>
        <div class="pesquisa-direito">
            <input type="text" placeholder="Pesquise aqui" />
        </div>
    </div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .