elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Estamos en la red social de Mastodon


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Centrar imagen en todo el centro de pantalla		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Centrar imagen en todo el centro de pantalla  (Leído 2,255 veces)
cael1011

Desconectado Desconectado

Mensajes: 24


Ver Perfil
Centrar imagen en todo el centro de pantalla
« en: 23 Diciembre 2016, 07:09 am »
Tengo una imagen en la pagina pero deseo centrarla al centro de toda la pagina, este codigo utilizo para cambiar el tamaño.


Código
  1. <!DOCTYPE html>
  3.  
  4.  
  5. <head> 
  6. <title>UVIC</title> 
  7.     <link rel="stylesheet" href="css/com.css">
  8. </head> 
  9.     <body>
  10.  
  11. <img src="imagen/LOGO.png" alt="lighthouse"
  12.      sizes="80vw"
  13.      srcset="imagen/LOGO.png 160w,
  14.              imagen/LOGO.png 320w,
  15.              imagen/LOGO.png 640w,
  16.              imagen/LOGO.png 1280w">
  17.     </body>
  18. </html>
En línea
Razzari

Desconectado Desconectado

Mensajes: 76


El que espera desespera


Ver Perfil
Re: Centrar imagen en todo el centro de pantalla
« Respuesta #1 en: 24 Diciembre 2016, 01:47 am »
Si usas botstrap podés utilizar la clase "img-responsive" y otra clase "center-block", la primera para responsive y la  segunda para centrala.
De lo contrario yo la pondría entre una etiqueta <center> para que me la centre horizontalmente y para que quede centrada verticalmente con CSS le daría algún margin-top:.. Con algún porcentaje.
Espero te sirva, saludos
En línea
"Los ordenadores son inutiles, solo pueden darte respuestas" Pablo Picasso
cael1011

Desconectado Desconectado

Mensajes: 24


Ver Perfil
Re: Centrar imagen en todo el centro de pantalla
« Respuesta #2 en: 24 Diciembre 2016, 05:04 am »
Asi lo tengo pero aun no lo centro en medio de toda la pantalla



Código
  1. <!DOCTYPE html>
  3.  
  4.  
  5. <head> 
  6. <title>UVIC</title> 
  7.     <link rel="stylesheet" href="css/com.css">
  8. </head> 
  9.     <body>
  10.  
  11. <img src="imagen/LOGO.png" alt="lighthouse" "img-responsivey" clase=center-block
  12.      sizes="80vw"
  13.      srcset="imagen/LOGO.png 160w,
  14.              imagen/LOGO.png 320w,
  15.              imagen/LOGO.png 640w,
  16.              imagen/LOGO.png 1280w">
  17.     </body>
  18. </html>









Código
  1. img{
  2.  
  3. display:block;
  4. margin:auto;
  5.  
  6.  
  7. }
En línea
Razzari

Desconectado Desconectado

Mensajes: 76


El que espera desespera


Ver Perfil
Re: Centrar imagen en todo el centro de pantalla
« Respuesta #3 en: 24 Diciembre 2016, 07:55 am »
recorda que para usar las clases de bootstrap tenes que poner en tu header los siguientes link's:
antes que nada(bootstrap es una libreria de clases tanto de javascript como de CSS que ya viene con estilos escritos  http://getbootstrap.com/ ):


Código
  1. <!-- Latest compiled and minified CSS -->
  2. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  3.  
  4.  
  5. <!-- Latest compiled and minified javascript -->
  6. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

----------------

Código
  1. <img id="mi-imagen" src="...png" class="img-responsive center-block"></img>
(le di responsividad y lo centre horizontalmente)


el css yo probaria algo asi,
Código
  1. #mi-imagen{
  2. margin-top:40%;
  3. }
  4.  
(centro verticalmente)
------
Yo suelo usar bastante Bootstrap y otras librerias porque me hace desarrollar todo mas con ams facilidad, no obstante si te vas al archivo de boostrap y buscas por ejemplo en este caso la clase "img-responsive" ahi esta el codigo CSS de como hacer una imagen responsive etc. etc.

Mod: Obligatorio el uso de etiquetas GeSHi.
« Última modificación: 7 Enero 2017, 00:33 am por #!drvy » En línea
"Los ordenadores son inutiles, solo pueden darte respuestas" Pablo Picasso
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Subtitulos en el centro de la pantalla!!!
Multimedia 		4eyes 4 2,373 Último mensaje 20 Diciembre 2004, 20:53 pm
por Songoku
Centrar imagen en formulario MDI
Programación Visual Basic 		Overlord 1 12,769 Último mensaje 21 Octubre 2005, 21:11 pm
por la caca
Como cambiar la posicion para centrar en la pantalla LCD mi script? (SOLUCIONADO)
Scripting 		SuperDraco 4 5,993 Último mensaje 1 Diciembre 2009, 02:21 am
por SuperDraco
[Resuelto] centrar imagen posicion absoluta
Desarrollo Web 		Thryks 2 2,415 Último mensaje 6 Septiembre 2015, 16:42 pm
por Thryks
Ayuda como puedo centrar esta imagen de atras? osea centrar una imagen detras
Desarrollo Web 		ReAdriel 1 1,824 Último mensaje 8 Octubre 2018, 20:30 pm
por EdePC
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines