Centrar imagen en todo el centro de pantalla

cael1011 · 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 (html4strict) [Seleccionar]

<!DOCTYPE html>
<html>


<head> 
<title>UVIC</title> 
    <link rel="stylesheet" href="css/com.css">
</head> 
    <body>
        
<img src="imagen/LOGO.png" alt="lighthouse"
     sizes="80vw"
     srcset="imagen/LOGO.png 160w,
             imagen/LOGO.png 320w,
             imagen/LOGO.png 640w,
             imagen/LOGO.png 1280w">
    </body>
</html>

Razzari · 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

cael1011 · 24 Diciembre 2016, 05:04 AM

Asi lo tengo pero aun no lo centro en medio de toda la pantalla

Código (html4strict) [Seleccionar]

<!DOCTYPE html>
<html>


<head> 
<title>UVIC</title> 
    <link rel="stylesheet" href="css/com.css">
</head> 
    <body>
        
<img src="imagen/LOGO.png" alt="lighthouse" "img-responsivey" clase=center-block
     sizes="80vw"
     srcset="imagen/LOGO.png 160w,
             imagen/LOGO.png 320w,
             imagen/LOGO.png 640w,
             imagen/LOGO.png 1280w">
    </body>
</html>

Código (html4strict) [Seleccionar]

img{

display:block;
margin:auto;

    
}

Razzari · 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 (html5) [Seleccionar]

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<!-- Latest compiled and minified javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

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

Código (html5) [Seleccionar]

<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 (css) [Seleccionar]


#mi-imagen{
margin-top:40%;
}

(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.

Test Foro de elhacker.net SMF 2.1

Centrar imagen en todo el centro de pantalla

cael1011

Razzari

cael1011

Razzari