Centrar imagen usando centro de alineación de texto?

¿Es la propiedad text-align: center;una buena forma de centrar una imagen usando CSS?

img {
    text-align: center;
}

Eso no funcionará, ya que la text-alignpropiedad se aplica a los contenedores de bloques, no a los elementos en línea, y imges un elemento en línea. Ver la especificación W3C .

Use esto en su lugar:

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>

Eso no siempre funciona ... si no funciona, intente:

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

Encontré esta publicación , y funcionó para mí:

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>

(Alineación vertical y horizontal)

Otra forma de hacerlo sería centrar un párrafo adjunto:

<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>

Tu puedes hacer:

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

En realidad, el único problema con su código es que el text-alignatributo se aplica al texto (sí, las imágenes cuentan como texto) dentro de la etiqueta. Debería colocar una spanetiqueta alrededor de la imagen y establecer su estilo de la text-align: centersiguiente manera:

span.centerImage {
     text-align: center;
}

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

La imagen estará centrada. En respuesta a su pregunta, es la forma más fácil e infalible de centrar imágenes, siempre que recuerde aplicar la regla al contenido de la imagen span(o div).

Hay tres métodos para centrar un elemento que puedo sugerir:

1. Usando la text-alignpropiedad

       .parent {
       text-align: center;
   }

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

   Ejecutar fragmento de códigoOcultar resultados

   Expandir fragmento

2. Usando la marginpropiedad

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

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

   Ejecutar fragmento de códigoOcultar resultados

   Expandir fragmento

3. Usando la positionpropiedad

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

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

   Ejecutar fragmento de códigoOcultar resultados

   Expandir fragmento

El primer y segundo método solo funcionan si el padre es al menos tan ancho como la imagen. ¡Cuando la imagen es más ancha que su padre, la imagen no permanecerá centrada!

Pero: ¡el tercer método es una buena forma de hacerlo!

Aquí hay un ejemplo:

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>

Solo si necesita admitir versiones antiguas de Internet Explorer.

El enfoque moderno es hacerlo margin: 0 autoen tu CSS.

Ejemplo aquí: 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;
}

El único problema aquí es que el ancho del párrafo debe ser el mismo que el ancho de la imagen . Si no pone un ancho en el párrafo, no funcionará, porque asumirá el 100% y su imagen se alineará a la izquierda, a menos que, por supuesto, usetext-align:center .

Pruebe el violín y experimente con él si lo desea.

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

Si está utilizando una clase con una imagen, lo siguiente hará

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

Si es solo una imagen en una clase específica que desea centrar la alineación, lo siguiente hará:

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

En el contenedor que contiene la imagen, puede usar un CSS 3 Flexbox para centrar perfectamente la imagen en el interior, tanto vertical como horizontalmente.

Supongamos que tiene <div class = "container"> como titular de la imagen:

Luego, como CSS, debes usar:

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

Y esto hará que todo su contenido dentro de este div esté perfectamente centrado.

La solución más simple que encontré fue agregar esto a mi elemento img:

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

Parece que no necesito agregar "0" antes del "auto" como lo sugieren otros. Tal vez esa sea la forma correcta, pero funciona lo suficientemente bien para mis propósitos sin el "0" también. Al menos en las últimas versiones de Firefox, Chrome y Edge .

Simplemente cambie la alineación principal :)

Pruebe este en propiedades principales:

text-align:center

Puede usar text-align: centeren el padre y cambiar imga display: inline-block→ por lo tanto, se comporta como un elemento de texto y se centrará si el padre tiene un ancho.

img {
    display: inline-block
}

Usaría un div para alinear al centro una imagen. Como en:

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

Si desea establecer la imagen como fondo, tengo una solución:

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

Centrar una imagen sin fondo depende de si desea mostrar la imagen como un elemento en línea (comportamiento predeterminado) o un elemento de bloque.

Caso de en línea

Si desea mantener el comportamiento predeterminado de la propiedad CSS de visualización de la imagen, deberá envolver su imagen dentro de otro elemento de bloque en el que debe establecer text-align: center;

Caso de bloque

Si desea considerar la imagen como un elemento de bloque propio, entonces la text-alignpropiedad no tiene sentido, y debe hacer esto en su lugar:

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

La respuesta a tu pregunta:

Es la propiedad text-align: center; ¿Una buena manera de centrar una imagen usando CSS?

Si y no.

• Sí, si la imagen es el único elemento dentro de su contenedor.
• No, en caso de que tenga otros elementos dentro del contenedor de la imagen porque todos los elementos text-alignsecundarios que son hermanos de la imagen heredarán la propiedad: y es posible que no desee este efecto secundario.

Referencias

1. Lista de elementos en línea.
2. Centrando cosas

Una forma más de escalar: mostrarlo:

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 esto para su imgCSS:

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

display: blockcon margin: 0no funcionó para mí, ni envolviendo con un text-align: centerelemento.

Esta es mi solución:

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

translateX es compatible con la mayoría de los navegadores

Descubrí que si tengo una imagen y algo de texto dentro de a div, entonces puedo usar text-align:centerpara alinear el texto y la imagen de una sola 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

A veces agregamos directamente el contenido y las imágenes en el administrador de WordPress dentro de las páginas. Cuando insertamos las imágenes dentro del contenido y queremos alinear ese centro. El código se muestra como:

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

En ese caso, puede agregar contenido CSS como este:

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

Utilizar:

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

Creo que esta es la forma de centrar una imagen en el marco de Laravel.

.img-container {
  display: flex;
}

img {
  margin: auto;
}

esto hará que la imagen se centre tanto vertical como horizontalmente