Saltar al contenido

html – ¿Centrar la imagen usando el centro de alineación de texto?

septiembre 25, 2021
apple touch icon@2

Solo si necesita admitir versiones antiguas de Internet Explorer.

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/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, use text-align:center.

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

close