Inicialização do centro de alinhamento de imagem responsiva 3

423

Eu faço um catálogo usando o Bootstrap 3. Quando exibidas em tablets, as imagens do produto ficam feias por causa do tamanho pequeno (500x500) e da largura de 767 pixels no navegador. Eu quero colocar a imagem no centro da tela, mas por algum motivo eu não posso. Quem ajudará a resolver o problema?

Captura de tela de parte de uma página de produto com o produto não centralizado abaixo do título

html css image twitter-bootstrap alignment Konstantin Rusanov
fonte
5
Eu gosto do design do seu site e produtos - bom trabalho:)
Bojangles
7
Outro exemplo de "Por que precisamos colocar o código no corpo da pergunta".
LEQADA 25/10

Respostas:

572

Se você estiver usando o Bootstrap v3.0.1 ou superior, use esta solução . Ele não substitui os estilos do Bootstrap pelo CSS personalizado, mas usa um recurso do Bootstrap.

Minha resposta original é mostrada abaixo para a posteridade

Esta é uma solução agradavelmente fácil. Como o .img-responsiveBootstrap já está configurado display: block, você pode usar margin: 0 autopara centralizar a imagem:

.product .img-responsive {
    margin: 0 auto;
}
Bojangles
fonte
35
Provavelmente é melhor criar uma nova classe com margin: 0 auto, em vez de alterar .img-responsive.
Knite
4
Isso é um pensamento, embora pessoalmente não consiga pensar em nenhum lugar que eu queira que uma imagem responsiva não seja centralizada, especialmente com esse design. Tudo depende do caso de uso, e o que vai acontecer no futuro
Bojangles
Por favor, veja esta resposta se você estiver usando Bootstrap v4 ou superior: stackoverflow.com/a/43293957/4102515
snorberhuis
1156

Há .center-blockclasse no Twitter Bootstrap 3 ( desde a v3.0.1 ), então use:

<img src="..." alt="..." class="img-responsive center-block" />
DHlavaty
fonte
27
Essa deve ser a resposta aceita, pois você não precisa adicionar nenhum CSS para usá-lo.
precisa saber é o seguinte
16
class="img-responsive" style="margin: 0 auto;"funciona para mim class="img-responsive center-block"não (bootstrap 3, mas uma versão com alguns meses de idade)
mxro
9
O centro de alinhamento não funciona quando o img responsivo é usado.
Ismael
1
@DHlavaty, você pode explicar a diferença entre usar o .img-responsivo AND .center-block e apenas o .img-responsivo com uma margem automática, como sugere a resposta aceita? um método é mais robusto?
user137717
1
Você pode não querer usar isso se sua imagem for clicável. Ou seja, se estiver dentro de um <a href="#"> </a>par, a área clicável será expandida para toda a largura do contêiner anexo, que pode ser um pouco maior que a sua imagem. Isso pode confundir os usuários que clicam no que eles acham que é espaço "vazio".
CXJ
108

Adicione apenas a classe center-blocka uma imagem, isso também funciona com o Bootstrap 4:

<img src="..." alt="..." class="center-block" />

Nota: center-blockfunciona mesmo quando img-responsiveusado

Harry Bosh
fonte
6
Melhor resposta, mas subestimada. É por isso que você usa uma estrutura!
Baumannzone
Assim. Fantástico. Obrigado
AndrewLeonardi
Seu trabalho .. Obrigado
Dhiren Patel
31

Basta usar a .text-centerclasse se você estiver usando o Bootstrap 3.

<div class="text-center">
    <img src="..." alt="..."/>
</div>

Nota: Isso não funciona com img-responsive

Sai Kiran Sripada
fonte
1
A questão é sobreimg-responsive
Alexey Kosov
Para add img-center img-responsive (testado em 3.3.6) para aqueles que podem ver isso nas pesquisas do Google
DardanM
10

Isso deve centralizar a imagem e torná-la responsiva.

<img src="..." class="img-responsive" style="margin:0 auto;"/>
nPcomp
fonte
6

Eu sugeriria uma classificação mais "abstrata". Adicione uma nova classe "img-center", que pode ser usada em combinação com a classe .img-responsive:

// Center responsive images
.img-responsive.img-center {
  margin: 0 auto;
}
Michael
fonte
3 
@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}
Ahmed
fonte
2
Por que display: table? Já é display: blocko que é suficiente para chegar margin: 0 autoao trabalho
Bojangles
3

Você ainda pode trabalhar img-responsivesem afetar outras imagens com esta classe de estilo.

Você pode preceder essa tag com o ID da seção / ID da div / classe para definir uma ordem na qual isso imgestá aninhado. Esse costume img-responsivefuncionará apenas nessa área.

Suponha que você tenha uma área HTML definida como:

<section id="work"> 
    <div class="container">
        <div class="row">
            <img class="img-responsive" src="some_image.jpg">
        </div>
    </div>
</section>

Então, seu CSS pode ser:

section#work .img-responsive{
    margin: 0 auto;
}

Nota: Esta resposta está relacionada ao impacto potencial da alteração img-responsivecomo um todo. Claro, center-blocké a solução mais simples.

KannarKK
fonte
Esta resposta é subestimada, agrupar a imagem na classe de linha é crucial para centralizar a imagem quando houver um texto embaixo da imagem.
Glenn Plas
3

Tente este código, ele também funcionará para ícones pequenos com o bootstrap 4, porque não há uma classe de bloco central como bootstrap 4, portanto, tente esse método, será útil. Você pode alterar a posição da imagem configurando .col-md-12para .col-md-8ou .col-md-4, é com você.

<div class="container">
       <div class="row">
          <div class="col-md-12">
            <div class="text-xs-center text-lg-center">
           <img src="" class="img-thumbnail">
           </div>
          </div>
       </div>
  </div>
faseeh
fonte
3

Tente o seguinte:

.img-responsive{
    display: block;
    height: auto;
    max-width: 100%;
	  margin:0 auto;
}
.Image{
  background:#ccc;
  padding:30px;
}
<div class="Image">
  <img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>
Expandir snippet

Rafiqul Islam
fonte
3

Basta colocar todas as miniaturas das imagens dentro de uma linha / coluna divs assim:

<div class="row text-center">
 <div class="col-12">
  # your images here...
 </div>
</div>

e tudo vai funcionar bem!

Engenharia de Energia
fonte
2

Para adicionar às respostas já dadas, ter img-responsiveem img-thumbnailconjunto com será definido display: blockcomo display: inline block.

M. Oranje
fonte
2 
<div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

.

<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>
user956584
fonte
0

Você pode corrigi-lo com a margem de definição: 0 auto

ou você também pode usar col-md-offset

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
.img-responsive{
margin:0 auto;
}
</style>
<body>

<div class="container">
  <h2>Image</h2>
<div class="row">
<div class="col-md-12">
  <p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>                  
  <img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> 
</div>
</div>
</div>

</body>
</html>
Expandir snippet

Ganesh Putta
fonte
0

A maneira mais exata aplicada a todos os objetos Booostrap usando apenas classes padrão seria não definir margens superior e inferior (como a imagem pode herdá-las do pai), por isso estou sempre usando:

.text-center .img-responsive {
    margin-left: auto;
    margin-right: auto;
}

Também fiz um Gist para isso, portanto, se alguma alteração for aplicada devido a algum erro, a versão de atualização estará sempre aqui: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66

LordMagik
fonte
0

Até agora, a melhor solução a ser aceita parece ser <img class="center-block" ... />. Mas ninguém mencionou como center-blockfunciona.

Veja o Bootstrap v3.3.6 por exemplo:

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

O valor padrão de dispalypara <img>é inline. O valor blockexibirá um elemento como um elemento de bloco (como <p>). Começa em uma nova linha e ocupa toda a largura. Dessa forma, as duas configurações de margem deixam a imagem no meio horizontalmente.

themefield
fonte