Skip to main content
Commonmark migration
Fonte Link

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][1]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! [1]: https://i.sstatic.net/uYchJ.png

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][1]

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! [1]: https://i.sstatic.net/uYchJ.png

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!

Fonte Link
Wesley Moraes
  • 519
  • 1
  • 8
  • 25

Comportamento inesperado ao centralizar div

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][1]

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! [1]: https://i.sstatic.net/uYchJ.png