Dejo un intento de aporte, para mi tambien, de como centrar contenedores de forma absoluta a modo de "prompt" o alerta al entrar a una página por ejemplo. Este método parece que es compatible con la mayoría de navegadores. Y en pequeños dispositivos se adapta al 100% del ancho de la pantalla.
Si hay algo mal comentarlo please.
Saludos!
<!DOCTYPE html>
<html lang=en> <head><meta name=viewport content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta charset=UTF-8><title>Centrar contenedor verticalmente de forma absoluta, SamML</title><style>
@charset "utf-8";*{margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}/*SamML para aprendeaprogramar.com*/
.contenedor:after, .contenedor:before {
display:table;
content:" ";
zoom:1;
}
.contenedor {
position:fixed;
width:100%;
height:100%;
padding:15px
}
.contenedor:after {clear:both;}
.absolute-v-center {
background-color: #444;
color:white;
position: fixed;
width:100%;height:100%;top:0%;left:0%;
margin: 0;
z-index:1000;
}
@media (min-width:500px){
.absolute-v-center {top: 50%;left: 50%;height: 50%;width: 50%;margin: -15% 0 0 -25%;}
}
</style></head> <body> <div class=contenedor> <div class=absolute-v-center> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> </div> </div> <div> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> </div> <div class=container> <div> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> </div> </div> </body>
</html>
Tema: CSS3 Bloque absoluto tipo prompt ventana alerta código para aviso legal cookies (Leído 2957 veces)
RSS -
WAP2