[2021] html: ¿imagen central con alineación de texto centrada? {DH}


Solo si necesita admitir versiones anteriores de Internet Explorer.

El enfoque moderno es hacer margin: 0 auto en tu CSS.

Ejemplo aquí: http://jsfiddle.net/bKRMY/

Código 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 coincidir con el ancho de la imagen. Si no pone ancho en el párrafo, no funcionará porque se asume al 100% y su imagen se justificará a la izquierda a menos que use text-align:center.

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


SEGUIR LELLENDO:
[2021] html: ¿imagen central con alineación de texto centrada? {DH}

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *