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:
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!