centrar una imagen con un enlace en ella

4 minutos de lectura

avatar de usuario
pruebas

¿Es posible centrar una imagen solo configurando una clase para el img etiqueta sin efectos secundarios? El problema es el siguiente: tengo un ancla alrededor de una imagen. Si uso el siguiente CSS

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Y este (despojado) HTML:

<a href="https://stackoverflow.com/path/to/image.jpg" class="fancybox" rel="fancybox" title="System">
    <img src="https://stackoverflow.com/path/to/image.jpg" title="System" class="aligncenter">
</a>

el enlace toma todo el ancho del div principal. Esto significa que no solo se puede hacer clic en la imagen, también se puede hacer clic en el espacio alrededor de la imagen (en realidad, todo el ancho). Esto es a través del CSS. display: block.
ingrese la descripción de la imagen aquí

¿Cómo puedo centrar una imagen sin usar un div principal? No quiero que se pueda hacer clic en toda el área.

Antecedentes: Puedes leer este tema. Se trata de WordPress y el editor incorporado. Automáticamente genera la clase. aligncenter en una imagen (si el usuario presionó el botón central). Necesito esto para mi propio tema. Según los moderadores, esto debería ser solo una pregunta de CSS y no tiene que ver con cambiar el código en WordPress.

en la clase aligncenter agregue text-align:center

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
}

  • Eso no cambió nada.

    – prueba

    1 de mayo de 2012 a las 11:16

No estoy familiarizado con wordpress, pero es posible que desee intentar configurar la propiedad ‘display’ css de la imagen y de los anclajes en ‘inline-block’.

Si tiene limitaciones para cambiar el DOM del documento, otra opción es agregar un atributo ‘onClick’ a la imagen.
Esto le permitirá ejecutar alguna función una vez que se haga clic en la imagen.
Entonces, por ejemplo, si desea redirigir a otra página:

<img src="https://stackoverflow.com/questions/10396490/myImg.png" onclick='myRedirect()' style="cursor:pointer"/>

Y en el encabezado de la página:

<script type="text/JavaScript">
    var myRedirect = function(){
        window.location.href="https://stackoverflow.com/questions/10396490/Some other location";
    }
</script>

Observe la style="cursor:pointer"que cambia el cursor del mouse a un cursor de ‘mano’.

  • Desea responder a esta pregunta usando javascript, pero se puede hacer solo con css. Y un <a> etiqueta, destinado a los enlaces como usted sabe.

    – enero

    1 de mayo de 2012 a las 11:42

  • El enlace es solo para usar fancybox (para una versión completa de la imagen en miniatura). No sé cómo se vería tu código en este caso. Lo siguiente es cómo adjunto el evento onclick. ¿Otra vez con JS?

    – prueba

    1 de mayo de 2012 a las 11:46

  • @janw, posiblemente, pero dado que el póster de la pregunta original no pudo resolverlo con html + css (nuevamente, probablemente sea posible), sugerí esta solución.

    – EyalAr

    1 de mayo de 2012 a las 11:46


  • También tu respuesta no centra nada.

    – enero

    1 de mayo de 2012 a las 11:53

  • @janw, lea la publicación original y vea que el problema no es centrar la imagen, sino evitar que se pueda hacer clic en el área que la rodea.

    – EyalAr

    1 de mayo de 2012 a las 11:58

Para evitar un adicional div contenedor o incluso JavaScript, puede hacer que el ancla se muestre como un bloque:

.logo {display: block; height: 115px; margin: 0 auto; width: 115px;}

/* height and width must equal your image's values */

<a href="#" class="logo"><img src="logo.png" alt="Logo" /></a>

Demo en vivo: http://jsfiddle.net/performancecode/Ggk8v/

todavía incorpora un div, pero la forma en que lo hago es:

<div class="megaman">
<a href="https://stackoverflow.com/questions/10396490/img/megaman.jpg"><img src="https://stackoverflow.com/questions/10396490/img/megaman.jpg" alt="megaman"></a>
</div>



img {
height: 125px;
width: 200px;
}

.megaman{
text-align: center;
margin: 0 auto;
display: block;
}

Y sí, reemplacé .logo con .megaman porque ¡megaman mola! Pero debería funcionar. No pude resolverlo sin usar un div.

avatar de usuario
antonio wolter

La solución que encontré. agregando /></a> y el ancho y alto de la etiqueta de anclaje reduce el hipervínculo a la imagen…

<a class="link" href="URL" target="_blank"> <img width="75px" height="75px" alt="Facebook" src="IMAGE LOCATION"/></a>

Segunda respuesta:
pega esto en functions.php

add_filter('image_send_to_editor','give_linked_images_class',10,8);
function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt="" ) {
    // only do this on center
    if($align == 'center') {
        $html = str_replace('aligncenter', '', $html);
        $html="<p style="width: 100%; text-align: center;" >".$html.'</p>';
    }
    return $html;
}

La desventaja es que esto no afectará a las imágenes ya insertadas…
Además, si puede, mueva el estilo de la <p> a la hoja de estilo.

¿Ha sido útil esta solución?