Centralizar imagem usando o centro de alinhamento de texto?

A propriedade é text-align: center;uma boa maneira de centralizar uma imagem usando CSS?

img {
    text-align: center;
}

Isso não funcionará, pois a text-alignpropriedade se aplica ao bloco de contêineres, não aos elementos embutidos e imgé um elemento embutido. Veja a especificação W3C .

Use isto:

img.center {
    display: block;
    margin: 0 auto;
}

<div style="border: 1px solid black;">
<img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

Isso nem sempre funciona ... se não, tente:

img {
    display: block;
    margin: 0 auto;
}

Me deparei com este post , e funcionou para mim:

img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div style="border: 1px solid black; position:relative; min-height: 200px">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

(Alinhamento vertical e horizontal)

Outra maneira de fazer isso seria centralizar um parágrafo anexo:

<p style="text-align:center; border:1px solid black"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"></p>

Você pode fazer:

<center><img src="..." /></center>

Na verdade, o único problema com o seu código é que o text-alignatributo se aplica ao texto (sim, as imagens contam como texto) dentro da tag. Você gostaria de colocar uma spanmarca em torno da imagem e definir seu estilo para text-align: center:

span.centerImage {
     text-align: center;
}

<span class="centerImage"><img src="http://placehold.it/60/60" /></span>

A imagem será centralizada. Em resposta à sua pergunta, é a maneira mais fácil e infalível de centralizar imagens, desde que você lembre de aplicar a regra ao conteúdo span(ou div) da imagem.

Existem três métodos para centralizar um elemento que posso sugerir:

1. Usando a text-alignpropriedade

       .parent {
       text-align: center;
   }

       <div class="parent">
       <img src="https://placehold.it/60/60" />
   </div>

   Executar snippet de códigoOcultar resultados

   Expandir snippet

2. Usando a marginpropriedade

   img {
       display: block;
       margin: 0 auto;
   }

   <img src="https://placehold.it/60/60" />

   Executar snippet de códigoOcultar resultados

   Expandir snippet

3. Usando a positionpropriedade

   img {
       display: block;
       position: relative;
       left: -50%;
   }
   .parent {
       position: absolute;
       left: 50%;
   }

   <div class="parent">
       <img src="https://placehold.it/60/60" />
   </div>

   Executar snippet de códigoOcultar resultados

   Expandir snippet

O primeiro e o segundo métodos funcionam apenas se o pai for pelo menos tão largo quanto a imagem. Quando a imagem é mais larga que o pai, a imagem não fica centralizada !!!

Mas: o terceiro método é um bom caminho para isso!

Aqui está um exemplo:

img {
    display: block;
    position: relative;
    left: -50%;
}
.parent {
    position: absolute;
    left: 50%;
}

<div class="parent">
    <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" />
</div>

Somente se você precisar oferecer suporte a versões antigas do Internet Explorer.

A abordagem moderna é fazer margin: 0 autono seu CSS.

Exemplo aqui: http://jsfiddle.net/bKRMY/

HTML:

<p>Hello the following image is centered</p>
<p class="pic"><img src="https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"/></p>
<p>Did it work?</p>

CSS:

p.pic {
    width: 48px;
    margin: 0 auto;
}

O único problema aqui é que a largura do parágrafo deve ser igual à largura da imagem . Se você não colocar uma largura no parágrafo, ele não funcionará, porque assumirá 100% e sua imagem será alinhada à esquerda, a menos que você use text-align:center.

Experimente o violino e experimente, se quiser.

img{
    display: block;
    margin-right: auto;
    margin-left: auto;      
 }

Se você estiver usando uma classe com uma imagem, o seguinte fará

class {
    display: block;
    margin: 0 auto;
}

Se for apenas uma imagem em uma classe específica que você deseja centralizar o alinhamento, o seguinte será feito:

class img {
    display: block;
    margin: 0 auto;
}

Na imagem que contém o contêiner, você pode usar um Flexbox CSS 3 para centralizar perfeitamente a imagem dentro, vertical e horizontalmente.

Vamos supor que você tenha <div class = "container"> como detentor da imagem:

Então, como CSS, você deve usar:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

E isso tornará todo o seu conteúdo dentro desta div perfeitamente centralizado.

A solução mais simples que encontrei foi adicionar isso ao meu elemento img:

style="display:block;margin:auto;"

Parece que não preciso adicionar "0" antes do "auto", conforme sugerido por outras pessoas. Talvez essa seja a maneira correta, mas funciona bem o suficiente para meus propósitos sem o "0" também. Pelo menos no Firefox, Chrome e Edge mais recentes .

Simplesmente mude o alinhamento dos pais :)

Experimente este nas propriedades pai:

text-align:center

Você pode usar text-align: centero pai e alterar imgpara display: inline-block→, portanto, ele se comporta como um elemento de texto e será centralizado se o pai tiver uma largura!

img {
    display: inline-block
}

Eu usaria uma div para alinhar uma imagem no centro. Como em:

<div align="center"><img src="your_image_source"/></div>

Se você deseja definir a imagem como plano de fundo, eu tenho uma solução:

.image {
    background-image: url(yourimage.jpg);
    background-position: center;
}

Para centralizar uma imagem não em segundo plano depende se você deseja exibir a imagem como um elemento embutido (comportamento padrão) ou um bloco.

Caso em linha

Se você deseja manter o comportamento padrão da propriedade CSS de exibição da imagem, será necessário agrupar sua imagem dentro de outro elemento de bloco no qual você deve definir text-align: center;

Caso de bloqueio

Se você deseja considerar a imagem como um elemento de bloco próprio, a text-alignpropriedade não faz sentido, e você deve fazer isso:

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

A resposta para sua pergunta:

A propriedade alinhar texto: center; uma boa maneira de centralizar uma imagem usando CSS?

Sim e não.

• Sim, se a imagem for o único elemento dentro de seu invólucro.
• Não, caso você tenha outros elementos dentro do invólucro da imagem, porque todos os elementos filhos que são irmãos da imagem herdarão a text-alignpropriedade: e pode ser que você não goste desse efeito colateral.

Referências

1. Lista de elementos embutidos
2. Centrando coisas

Mais uma maneira de escalar - exiba:

img {
  width: 60%; /* Or required size of image. */
  margin-left: 20% /* Or scale it to move image. */
  margin-right: 20% /* It doesn't matters much if using left and width */
}

Use isso para o seu imgCSS:

img {
  margin-right: auto;
  margin-left: auto;
}

display: blockcom margin: 0não funcionou para mim, nem quebra com um text-align: centerelemento.

Esta é a minha solução:

img.center {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
}

translateX é suportado pela maioria dos navegadores

Descobri que, se eu tenho uma imagem e algum texto dentro de a div, posso usá-lo text-align:centerpara alinhar o texto e a imagem de uma só vez.

HTML:

    <div class="picture-group">
        <h2 class="picture-title">Picture #1</h2>
        <img src="http://lorempixel.com/99/100/" alt="" class="picture-img" />
        <p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p>
    </div>

CSS:

.picture-group {
  border: 1px solid black;
  width: 25%;
  float: left;
  height: 300px;
  #overflow:scroll;
  padding: 5px;
  text-align:center;
}

CodePen: https://codepen.io/artforlife/pen/MoBzrL?editors=1100

Às vezes, adicionamos diretamente o conteúdo e as imagens no administrador do WordPress dentro das páginas. Quando inserimos as imagens dentro do conteúdo e queremos alinhar esse centro. O código é exibido como:

 **<p><img src="https://abcxyz.com/demo/wp-content/uploads/2018/04/1.jpg" alt=""></p>**

Nesse caso, você pode adicionar conteúdo CSS como este:

article p img{
    margin: 0 auto;
    display: block;
    text-align: center;
    float: none;
}

Usar:

<dev class="col-sm-8" style="text-align: center;"><img src="{{URL('image/car-trouble-with-clipping-path.jpg')}}" ></dev>

Eu acho que esse é o caminho para centralizar uma imagem no framework Laravel.

.img-container {
  display: flex;
}

img {
  margin: auto;
}

isso fará com que o centro da imagem seja vertical e horizontalmente