Centro anclada en la imagen después del salto?

StackOverflow https://stackoverflow.com/questions/1830711

  •  11-09-2019
  •  | 
  •  

Pregunta

Cuando salto a una etiqueta de anclaje en en una amplia (4000px) página, la imagen anclado está alineada horizontalmente a la derecha. ¿Cómo puedo conseguir que se alinee con el centro? He intentado varias cosas pero ninguno parece funcionar. Puesto que soy nuevo aquí no estoy autorizado para publicar el código, así que espero que era lo suficientemente clara.

Gracias por su ayuda,

Robert C.

¿Fue útil?

Solución

El problema surge debido a que el navegador va a hacer la menor cantidad de desplazarse necesaria para que el elemento anclado a la vista. Por lo tanto, si se va a la derecha del área visible, cuando se hace clic en la etiqueta de anclaje, simplemente desplazarse suficientemente lejos hacia la derecha para revelar todo el elemento.

Se puede solucionar este comportamiento con javascript si eso es una opción. Usted no será capaz de centrarla en #anchor clic con CSS recta.

Aquí es una "solución" usando jQuery. Tengo "solución" entre comillas porque puede introducir más problemas de los que desea. Por ejemplo, sin más JS el botón de atrás no funcionará para ir al enlace anterior. Pero esto no centrar el artículo dado su código de ejemplo.

Sólo tiene que añadir esto a la página vinculado anteriormente antes de la etiqueta de cierre <head>: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
<script type="text/javascript">
$(function(){
   $("a[href^=#]").click(function(e){
       var id      = $(this).attr('href').substr(1),
           $target = $('*[name=' + id + '] img'),
           $window = $(window),
           offset  = $target.offset();

       var left = offset.left - ($window.width() / 2) + ($target.width() / 2 );
       var top  = offset.top  - ($window.height() / 2) + ($target.height() / 2);


       $('html,body').scrollTop(top).scrollLeft( left);

       e.preventDefault(); // Keep the browser from trying
   });  
});
</script>

Se encontrará todas las etiquetas a con enlaces internos (href comienza con #). A continuación se encuentra el objetivo que tiene ese nombre, y agarra la etiqueta img niño. Luego se pone las dimensiones del elemento y el elemento img window. Hace algunos cálculos con los elementos img offset, y se desplaza en el centro.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top