Unexpected behavior when centering div

Navigation
2

I made a basic structure: a wrapper involving 3 divs! Since the first floats to the left, the middle 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 centralizing properly. It does not respect the div wrapper.

This image helps explain what I mean:

Byinspectingtheelement,youcanseethatthemiddledivisnotcenteredrelativetothedivwrapper.Ontherightside,itextendstotheend,butontheleftsideitisbarredbythedivcontainingtheimage.

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 someone explain what is happening? Thanks!

    
asked by anonymous 26.06.2015 / 23:06

2 answers

2

This is because the display: table; property has been added to the .nome-center class. There are a lot of ways to work around this, but the quickest and most "hacky" approach to doing this would be to give position:absolute; to logo-esquerdo instead of float:left; . Example: 

.logo-esquerdo{
    position:absolute;
}

Example online ► link

Later you can stylise this so that the left-side logo does not overlap with other images using media queries to put the images one below the other on small-resolution screens.

    
27.06.2015 / 00:40
2

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

The result is that the image of div of the middle is centered. (I do not know if it's the 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>
    
27.06.2015 / 01:04
Sql - Query of two maximum values Update tables using trigger, from a main table