none
Login Centralizar caixas de texto RRS feed

  • Pergunta

  • Bom dia, estou com dificuldades em deixar as caixas de textos alinhadas com o texto label, conforme altera o tamanho da tela (responsivo).

    Segue meu código:

    <!DOCTYPE html>
    <html lang="pt-br">
    
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    	<title>Centralizar Login</title>
    
    	<!-- Bootstrap -->
    	<link href="css/bootstrap.min.css" rel="stylesheet">
    	
    
    	<style type="text/css">
    
    	.containeri img {
    		width: auto;
    		height: auto;
    	}
    	
    	
    	.buttonLogin {
    		font-family: Ubuntu-Bold;
    		font-size: 16px;
    		color: #fff;
    		line-height: 1.2;
    		text-transform: uppercase;
    
    		display: -webkit-box;
    		display: -webkit-flex;
    		display: -moz-box;
    		display: -ms-flexbox;
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		padding: 0 20px;
    		width: 100%;
    		height: 62px;
    		
    		background-color: blue;
    		border-radius: 3px;
    
    		-webkit-transition: all 0.4s;
    		-o-transition: all 0.4s;
    		-moz-transition: all 0.4s;
    		transition: all 0.4s;
    	}
    
    	.buttonLogin:hover {
    		background-color: #403866;
    	}
    
    	.buttonLogin:focus {
    		background-color: #04B404;
    	}
    
    
    
    	.loginFonte {
    		font-family: arial;
    		font-size: 32px;
    		font-weight:bold;
    		color: red;
    		line-height: 1.2;
    		text-transform: uppercase;
    		text-align: center;
    		width: 100%;
    		display: block;
    	}
    
    
    
    	.inputLogin {
    		font-family: Ubuntu-Bold;
    		color: #403866;
    		line-height: 1.2;
    		font-size: 18px;
    		background-color: #e6e6e6;
    		display: block;
    		width: 100%;		
    		height: 60px;
    		padding: 0 20px 0 38px;
    	}
    
    
    	
    
    
    
    
    	@media screen and (min-width: 320px) {
    		.centralizar {margin: 0 auto;
    		width: 100%; /* Valor da Largura */}
    	}
    
    	@media screen and (min-width: 480px) {
    		.centralizar {margin: 0 auto;
    		width: 80%; /* Valor da Largura */}
    	}
    
    
    	@media screen and (min-width: 600px) {
    		.centralizar {margin: 0 auto;
    		width: 70%; /* Valor da Largura */}
    	}
    
    
    
    
    	@media screen and (min-width: 768px) {
    		.centralizar {margin: 0 auto;
    		width: 50%; /* Valor da Largura */}
    	}
    
    
    
    	@media screen and (min-width: 992px) {
    		.centralizar {margin: 0 auto;
    		width: 40%; /* Valor da Largura */}
    	}
    
    
    
    	@media screen and (min-width: 1200px) {
    		.centralizar {margin: 0 auto;
    		width: 35%; /* Valor da Largura */}
    	}
    
    
    
    </style>
    
    
    </head>
    <body>
    
    	<br/>
    
    	<div class="container-fluid">
    		
    		<img src="img/logoLogin2.png" alt="IPS Serviços" class="containeri center-block" />
    
    		<div class="centralizar">
    			
    			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"  align="center">
    				<div class="loginFonte" align="center" style="margin-bottom: 15px">BEM VINDO AO IPSWEB</div>
    			</div>
    
    			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"  align="center">
    				<input id="txtUsuario"  class="text-uppercase inputLogin" style="margin-bottom: 15px" type="text" name="username" placeholder="Usuário" autofocus="autofocus"  />	
    				<input id="txtSenha" class="text-uppercase inputLogin" style="margin-bottom: 25px" type="password" placeholder="Senha" />	
    			</div>		
    
    			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"  align="center">							
    				<button id="btnEntrar" class="btn btn-primary buttonLogin"  align="center">Entrar</button>
    			</div>
    
    		</div>
    
    	</div>
    
    
    
    </body>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </html>

    Ele fica assim quando tenho uma tela grande

    Tela pequena (gostaria que ficasse sempre assim) ----->


    Ele fica assim quando tenho uma tela grande
    Ele fica assim quando tenho uma tela grande

    Se for para responder "procure no google", nem perca seu tempo ! :)

    segunda-feira, 18 de junho de 2018 14:03