Unexpected behavior when centralizing div

Question

I made a basic structure: a wrapper involving 3 Divs! The first one floats to the left side, the middle one would have its margin defined as 0 auto and the last div floating to the right side. The problem is that the centralized div is not centering properly. It does not respect the div wrapper.

This image helps explain what I’m trying to say:

Inspecting the element, you can see that the middle div is not centered on the div wrapper. On the right side, it extends to the end, but on the left side, it is barred by the div that contains the image.

Code:

.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>

Please, in addition to solving the problem, can anyone explain to me what is happening? Thank you!

Answer 1

This is because property display: table; was added to the class .nome-center. There are a lot of ways to solve this, but the quickest and most "Hacky" to solve this in this case would be to give a position:absolute; to class logo-esquerdo instead of property float:left;. Example:

.logo-esquerdo{
    position:absolute;
}

Online example http://jsfiddle.net/xuq32udc

Later you can style this so that the logo on the left does not overlap with the other images using media queries to place the images below each other on small resolution screens.

Answer 2

Another way to solve (I was testing here and now I saw Chun’s answer (+1), but I’ll post it anyway :)) is by determining the relative size of the internal Ivs, removing the display:table and the padding-left: 20px;, and align the divwith center in HTML.

The result is that the image of div center center. (I don’t know if it’s best practice, but it works).

 .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>