Search the Community
Showing results for tags 'alinhar caixas texto'.
Found 1 result
-
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 normal --> Tela pequena (gostaria que ficasse sempre assim) -----> Alinhando com o texto acima
