Remove From My Forums

Login Centralizar caixas de texto

Pergunta

Entrar para Votar

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

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

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

Inquiridor

Login Centralizar caixas de texto

Pergunta