1

Estou tentando criar uma página simples em HTML, redimensionável, na qual, o conteúdo fique todo centralizado verticalmente.

Porém não estou conseguindo centralizar as caixas de texto de nenhuma maneira.

Esse código a principio será a interface gráfica de um APP para Android. Estou codificando de forma que o conteúdo se redimensione automaticamente conforme o tamanho do Viewbox (Dispositivo).

Estou travado nesta parte de centralizar, e não consigo avançar.. Estou iniciando no desenvolvimento HTML5+CSS3 e gostaria de pedir a ajuda de vocês. Qual direção devo tomar?

Segue o código HTML que estou usando

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login</title>
	<link href="css/login.css" rel="stylesheet" type="text/css">
  </head>
  <body>
  <div id="divMain">
  <div id="titleDiv">
    <h1>LOGIN</h1>
  </div>
  <div id="loginDiv">
    <input type="text" value="CPF/CNPJ" id="txtLogin" 
    onFocus="if (this.value=='CPF/CNPJ') this.value = '';" 
    onBlur="if (this.value=='') this.value='CPF/CNPJ';"/>
    <input type="text" value="SENHA" id="txtPassword" 
    onFocus="if (this.value=='SENHA') this.value = ''; this.type='password';" 
    onBlur="if (this.value=='') {this.value='SENHA'; this.type='text';}"/>
  </div>
  </div>
  </body>
</html>

E o código abaixo em CSS:

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body {
	background: #2F6790;
}

#divMain{
	margin: auto;
    width: 50%;
    padding: 10px;
	display:table;
}
#titleDiv{
	justify-content: center;
	align-items: center;
	margin-top: 5%;
	vertical-align:middle;
}

#txtLogin{
	margin: auto;
    width: 30%;
    padding: 10px;
	display:table-cell;
	position:absolute;
	}
#txtPassword{
	margin: auto;
    width: 30%;
    padding: 10px;
	display:table-cell;
	position:absolute;
	margin-top:5%;
	}
#loginDiv{
	justify-content: center;
	align-items: center;
	margin-top: 5%;
	vertical-align:middle;
   }

No aguardo. Desde já agradeço!

0

2 Respostas 2

4

Eu não sou nenhum especialista, mas espero que isto te ajude :)

body {
	background: #2F6790;
}
#divMain{
  width: 50%;
  margin: auto;
  padding: 10px;
  text-align: center;
}
#login {
  color: #fff;
}
.field {
  width: 100%;
  margin-bottom: 20px;
  font-size: 1.5em;
  padding: 5px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
	  <meta http-equiv="X-UA-Compatible" content="IE=edge">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login</title>
	  <link href="css/login.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="divMain">
      <h1 id="login">LOGIN</h1>
      <input class="field" type="text" placeholder="CNPJ/CPF" id="txtLogin"/>
      <input class="field" type="password" placeholder="Insira sua senha" id="txtPassword"/>
  </div>
  </body>
</html>

1
  • Muito obrigado! Sua ajuda foi muito importante! Valeu! Commented 28/11/2016 às 15:57
0

As respostas acima te dão um norte para você conseguir o que deseja. Mas uma outra opção e bem mais atual é a utilização do "CSS flex". Dá uma lida depois. Ele vai te ajudar em muitos casos de posicionamentos.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

1
  • 1
    Interessante, ótimo conteúdo. Obrigado. Abraço! Commented 28/11/2016 às 15:58

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .