Centrar la imagen usando text-align center?

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

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

Se encontró con este post y funcionó para mí:

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

(Alineación vertical y horizontal)

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

<p style="text-align:center"><img src="..."/></p>

Puedes hacer:

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

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

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 y cuando recuerde aplicar la regla a la imagen que contiene span (o div).

Solo si necesita admitir navegadores IE antiguos.

El enfoque moderno es hacer margin: 0 auto en su 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 pones un ancho en el párrafo, no funcionará, porque asumirá el 100% y tu imagen estará alineada a la izquierda, a menos que, por supuesto, uses text-align:center.

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

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

1. Usando la propiedad text-align

       .parent {
       text-align: center;
   }

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

2. Usando la propiedad margin

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

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

3. Usando la propiedad position

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

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

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

Pero: Tercer método es una buena manera de que!

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>

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

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

Si es solo una imagen en un calss específico que desea alinear al centro, lo siguiente hará

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

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

Simplemente cambie la alineación del padre:)

Pruebe esta en las propiedades principales text-align:center

Puede usar text-align: center en el padre y cambiar el img a 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
}

En la imagen que contiene el contenedor, puede usar css3 flex box para centrar perfectamente la imagen en el interior, tanto vertical como horizontalmente. Supongamos que tiene como titular de la imagen: entonces como css Tienes que usar

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

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

Usaría un div para centrar la alineación de una imagen. Como en:

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

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

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

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

Caso de inline

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

Caso de bloque

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

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

La respuesta a su pregunta:

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

Sí y no.

• Sí, si la imagen es el único elemento dentro de su envoltura.
• No, en caso de que tenga otros elementos dentro de la envoltura de la imagen porque t todos los elementos secundarios que son hermanos de la imagen heredarán la propiedad text-align: y puede ser que no le gustaría este efecto secundario.

Referencias

1. Lista de elementos inline
2. Centrando las 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% /* doesn't matters much if using left and width */
}

Use esto para su img css

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

display: block con margin: 0 no funcionó para mí, ni envolver con un elemento text-align: center.

Esta es mi solución:

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

translateX es compatible con la mayoría de navegadores

Descubrí que si tengo una imagen y algo de texto dentro de un div, entonces puedo usar text-align:center para 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 wordpress admin dentro de las páginas. Cuando insertamos las imágenes en el lado 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 puedes añadir css de la siguiente manera:

Artículo p img{ margen: 0 auto; pantalla: bloque; alineación de texto: centrar; flotador: ninguno; }

Espero que ayude en esa situación.

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

Creo que este es el camino para la imagen central en el trabajo de marco laravel.