html - una - Centrar la imagen usando el texto alinear el centro?

justificar texto html

Question

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

img {
    text-align: center;
}

Answer 1

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 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 agregar css así:

articulo p img {margen: 0 auto; bloqueo de pantalla; text-align: center; flotar: ninguno; }

Espero que ayude en esa situación.

Answer 2

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

Si desea mantener el comportamiento predeterminado de la propiedad CSS de visualización de la imagen, deberá ajustar 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 propiedad de text-align 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 envoltorio.
• No, en caso de que tenga otros elementos dentro del envoltorio de la imagen, porque todos los elementos secundarios que son hermanos de la imagen heredarán la propiedad text-align : y puede que no le guste este efecto secundario.

Referencias

2. Lista de elementos en línea
3. Centrando las cosas

Answer 3

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

Answer 4

En el contenedor que contiene la imagen Puede usar el css3 flex box para centrar perfectamente la imagen en el interior, tanto vertical como horizontalmente. Supongamos que tienes como titular de la imagen: luego 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 esta div se centre perfectamente.

Answer 5

En realidad, el único problema con su código es que el atributo de text-align de texto se aplica al texto (sí, las imágenes cuentan como texto) dentro de la etiqueta. Desearía colocar una etiqueta de span alrededor de la imagen y establecer su estilo en 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 y más infalible de centrar las imágenes, siempre que recuerde aplicar la regla a la span contiene la imagen (o div ).

Answer 6

Encontré este post y me funcionó:

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

(Alineación vertical y horizontal)

Answer 7

Eso no funcionará ya que la propiedad text-align aplica a los contenedores de bloque, no a los elementos en línea, y img es un elemento en línea. Ver la especificación W3C .

Use esto en su lugar:

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

Answer 8

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

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

Answer 9

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 propiedad de margin

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

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

3. usando propiedad de position

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

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

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 se mantendrá centrada!

Pero: ¡El tercer método es una buena manera para eso!

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>

Answer 10

La solución más sencilla 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 los últimos Firefox y Chrome y Edge.

Answer 11

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

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

Answer 12

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 quiere alinear en el centro entonces lo siguiente será suficiente

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

Answer 13

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

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

Answer 14

Solo si necesitas soportar los antiguos navegadores IE.

El enfoque moderno es hacer margin: 0 auto en 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/Logo_reasonably_small.png"/></p>
<p>Did it work?</p>

CSS:

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

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

Prueba el violín y experimenta con él si quieres.

Answer 15

Tu puedes hacer:

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

Answer 16

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 */
}

Answer 17

Usa esto para tu img css

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

Answer 18

Yo usaría un div para alinear una imagen en el centro. Como en:

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

Answer 19

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

Answer 20

simplemente cambia la alineación de los padres :)

Prueba este en las propiedades principales text-align:center

Answer 21

display: block con margin: 0 no funcionó para mí, ni envolver con un elemento de 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 los navegadores

Answer 22

<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 centrar la imagen en el trabajo de marco de laravel.

Answer 23

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