Me gustaría saber como puedo insertar una imagen debajo de mi formulario de login. He intentado hacerlo mediante css con el div imgPubli que podeis ver un poco mas abajo en la pagina html y en el css tambien. El problema que tengo es que la imagen no se queda centrada debajo del form. La parte izquierda de la imagen imgPubli si esta alineada con el form pero al terner un width mayor, se sale por la derecha.
html {
min-height: 100%;
font-family: Arial,Helvetica,sans-serif;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { /*Boton aceptar*/
border: 0px solid #333333;
background: #777777;
font-weight: 400;
color: #ffffff;
}
/*-----------------------------------------*/
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.text {
font-family: Arial,Helvetica,sans-serif;
}
/*Se refiere a los addon de login y registro*/
.input-group-addon {
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1;
color: white;
text-align: center;
background-color: #686A10;
border: 1px solid #ccc;
border-radius: 4px;
}
.Absolute-Center.is-Responsive {
width: 50%;
min-width: 360px;
max-width: 800px;
padding: 0px;
}
@media only screen and (min-height: 400px) {
#logo{
margin: auto;
margin-bottom: 0px;
width:200px;
height:200px;
background-image:url("../img/cana.jpg");
}
}
#logo-error{
margin: auto;
margin-bottom: 10px;
width:90px;
height:75px;
background-image:url("../img/error.png");
}
#contenedor{
padding: 0px 70px 0px 70px;
}
#txtInfo{
text-align: justify;
}
/*Estos son los labels de volver a login y la interrogación*/
#idLogin,#lblInfo{
text-align: center;
}
@media only screen and (max-width: 500px) { /*No quiero que me haga el sombreado en vista movil*/
#contenedor{
padding: 0px 5px 0px 5px;
box-shadow: none;
/* border-bottom:none;*/
border-right: none;
}
/*Adapto el texto a vista movil*/
#textoRegistro{ /* Este div de muestra el texto de aviso de registro web*/
text-align: justify;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width:320px;
height:160px;
font-weight: 900;
font-family: Arial,Helvetica,sans-serif;
color:#337AB7;
font-size:1em;
}
}
#chkConsentimiento{
padding-bottom: 10px;
}
.btn-primary {
background: transparent;
border-color: #686A10;
color:#686A10;
}
.btn-primary:focus,
.btn-primary:active
{
background-color:transparent;
border-color:#686A10;
outline: none !important;
box-shadow: 0 1px 1px rgba(142,145,0,0.71) inset, 0 0 1px rgba(142,145,0,0.71);
}
.btn-primary:active:hover
{
color: #686A10;
background-color: transparent;
border-color:#686A10;
box-shadow: 0 1px 1px rgba(142,145,0,0.71) inset, 0 0 1px rgba(142,145,0,0.71);
}
.btn-primary:hover
{
background-color: transparent;
border-color: #686A10;
color: #686A10;
box-shadow: 0 1px 1px rgba(142,145,0,0.71) inset, 0 0 1px rgba(142,145,0,0.71);
}
.btn-primary:focus,.btn-primary:active {
outline: none !important;
box-shadow: none;
color:#686A10;
box-shadow: 0 1px 1px rgba(142,145,0,0.71) inset, 0 0 1px rgba(142,145,0,0.71);
}
.form-control {
border: 1px solid #686A10;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
.uneditable-input:focus {
border-color: rgba(142,145,0,0.71);
box-shadow: 0 0.8px 0.8px rgba(142,145,0,0.71) inset, 0 0 0.8px rgba(142,145,0,0.71);
}
footer { /*Fondo de pie de pagina vista normal */
position: absolute;
bottom: 0;
width: 100%;
height: 105px;
}
h5.acceso{
font-weight: 900;
font-family: Arial,Helvetica,sans-serif;
color: #686A10;
cursor:pointer;
padding-bottom: 10px;
}
a { /*Cambia de color el enlace*/
color: #686A10;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/styleLogin.css"><!--Mi Estilo-->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://code.jquery.com/ui/1.12.1/themes/vader/jquery-ui.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.28.7/css/keyboard.min.css">
<link rel="stylesheet" href="css/styleLogin.css"><!--Mi Estilo-->
</head>
<body>
<div class="Absolute-Center is-Responsive ">
<div class="col-sm-12 col-md-10 col-md-offset-1">
<div id="contenedor">
<a href="http://www.google.es">
<div id="logo"></div>
</a>
<div id="logo-error" style="display:none"></div>
<form method="post" action="javascript:login();" name="loginForm" id="loginForm">
<center><H5 CLASS="acceso "><div class="col-md-12" id="lblRegistro">- SOLICITAR CODIGO DE ACCESO -</div></h5></center>
<div class="form-group input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" id="idUsuario" data-toggle="tooltip" data-placement="top" title="Números y letra mayúscula y sin espacios" name="txtUsuario" placeholder="Introduzca DNI o CIF" required />
</div>
<div id="idTextoError" class="alert alert-danger" style="display:none"></div>
<div class="form-group input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" class="form-control" title="Introduzca clave." name='txtClave' id="idClave" placeholder="Clave" required />
</div>
<div class="form-group">
<button type="submit" class="btn-sm btn btn-primary btn-block"><strong>Aceptar</strong></button>
</div>
</form>
</div>
<a href="https://www.google.es/"><img src="img/imgPubli.jpg" width="100%"></a>
</div>
</div>
</body>
</html>