Centralize Web Page Content

Asked

Viewed 6,733 times

1

I’m trying to create a simple page in HTML, resizable, where the content is all centered vertically.

But I’m not able to center the text boxes in any way.

This code will initially be the graphical interface of an Android APP. I am encoding so that the content automatically resizes according to the size of the Viewbox (Device).

I’m stuck on this centralizing part, and I can’t move forward.. I’m starting HTML5+CSS3 development and would like to ask for your help. Which direction should I take?

Follow the HTML code I’m using

<!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>

And the code below in 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;
   }

I am waiting. I thank you in advance!

html css html5 web-application webdesign

2 answers

4


I’m no expert, but I hope this helps you :)

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>

  • Thank you so much! Your help was very important! Thanks!

0

  • 1

    Interesting, great content. Thank you. Hug!

Browser other questions tagged html css html5 web-application webdesign

You are not signed in. Login or sign up in order to post.