Centralizar uma imagem em uma div demais para isso?

Question

Então, eu tenho uma div em meu corpo que é uma largura percentual, e dentro daquela div com estilo embutido da seguinte maneira:

text-align: center; margin-left: -15px; margin-right: -15px; overflow: hidden;

Como você pode ver, eu tenho text-align: center; em que seria, se a imagem fosse pequena o suficiente para o div, centralize a imagem. Mas a largura percentual div Definitivamente, não será grande o suficiente na minha tela 1280x800.

As margens negativas devem superar algum estofamento em seus pais div. o overflow:hidden Faz com que as coisas pareçam que eu quero, não bagunçado. Então, está funcionando como eu quero, como a imagem do cabeçalho em Onenaught.com. Ficará mais visível à direita à medida que você tornar o navegador mais largo, mas não se expandir de ambos os lados, porque não está centrado.

Então, eu me pergunto se há alguma maneira de centralizar a imagem. Sabe de algum?

Editar Página aqui.

Answer 1

Uma opção seria posicionar absolutamente a imagem com left: 50% e, em seguida, use uma margem-esquerda negativa na imagem igual à metade da largura da imagem. Claro, isso requer o contendo div Ter seu posicionamento definido como relativo ou absoluto para fornecer o tipo de contêiner adequado para que a imagem esteja absolutamente posicionada.

A outra opção (e provavelmente melhor) é em vez de usar uma tag de imagem, basta definir a imagem como o fundo para a divis Posicionamento de fundo Atributos CSS para centralizá -lo. Isso não apenas garante que esteja centrado sem forçar o posicionamento absoluto, mas também o excesso automaticamente de culturas, portanto o atributo de transbordamento não é necessário.

Answer 2

Você pode realmente fazer isso definindo o margin-left e margin-right na imagem para -100%.

Aqui está um jsfiddle demonstrando isso. (use o abaixo, é melhor)

É uma ideia ainda melhor definir o margin-left e margin-right na imagem para um número negativo muito maior, por exemplo -9999%, como no -100% valor, a imagem começa a se mover para fora do centro assim que o divO elemento contendo se torna menos largo que 3 vezes a largura do div:

margin-left: -100% + the div's width: 100% + margin-right: -100% = 3x div width

Você pode verificar a diferença de comportamento entre isso jsfiddle e o anterior, alternando o transbordamento para visível e redimensionar a janela de resultado para menos que 300% da largura do div.

Citando @maxoriola na gama de navegadores suportados (dos comentários):

Eu testou o segundo violino ... em Firefox, Chrome, Safari (últimas versões) e Explorer 8, 9, 10. Funciona bem em todos eles.

Observação: Elemento de imagem deve ser exibido inline ou inline-block e centrado horizontalmente com text-align: center (no elemento do invólucro).

// ALL of the JS below is for demonstration purposes only

$(document).ready(function() {
  $('a').click(function() {
    $('body > div').toggleClass('overflow');
  });
})

img {
  margin: 0 -9999% 0 -9999%;
}


/* ALL of the CSS below is for demonstration purposes only */

body {
  text-align: center;
  font-family: verdana;
  font-size: 10pt;
  line-height: 20pt;
}

body>div {
  margin: 0px auto;
  width: 40%;
  background-color: lightblue;
  overflow: hidden;
}

img {
  vertical-align: top;
}

.overflow {
  overflow: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>40% wide div [<a href="#">toggle overflow</a>]
  <div>
    <img src="http://via.placeholder.com/400x200" />
  </div>
  400px wide image
</div>

Answer 3

Usando CSS transform, para uma imagem dentro de um recipiente com overflow: hidden e uma largura definida:

img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: block; /* optional */
}

jsfiddle aqui (Peguei emprestado parte do JSfiddle de Mathijs Flietstra, então obrigado).

Answer 4

Considere usar a imagem como plano de fundo;)

Use a posição de fundo para obter o que deseja.

Você pode precisar de uma solução JavaScript para obter resultados consistentes de navegador

Answer 5

Eu encontrei outra solução

<style type="text/css">
    .container {
        width:600px; //set how much you want
        overflow: hidden; 
        position: relative;
     }
     .containerSecond{
        position: absolute; 
        top:0px; 
        left:-100%; 
        width:300%;
     }
     .image{
        width: 800px; //your image size 
     }           
</style>

e no corpo

<div class="container">
   <div class="containerSecond">
       <image src="..." class="" />
   </div>
</div>

Isso centralizará sua imagem sempre que seu contêiner for maior ou menor. Nesse caso, sua imagem deve ser maior que 300% do contêiner para não estar centrado, mas nesse caso você pode fazer com o recipiente maior, e funcionará