Locating objects in the middle of a form

Question

Locating objects in the middle of a form

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (1 votes)

2

I have the following code

body {}

.PrincipalForm {
  margin: 0 auto;
  border: 1px solid #666666;
  width: 310px;
  height: 600px;
}

.TblLogin {
  margin: 0 auto;
}

#usuario {
  width: 150px;
}

#password {
  width: 150px;
}

#Aceptar {
  width: 150px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Login</title>
  <link rel="stylesheet" href="css/estiloLogin.css" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>

<body>
  <form class="PrincipalForm">
    <table class="TblLogin">
      <tr>
        <label>Usuario:</label>
      </tr><br>
      <tr>
        <input type="text" id="usuario">
      </tr><br>
      <tr>
        <label>Password:</label>
      </tr><br>
      <tr>
        <input type="password" id="password">
      </tr><br>
      <tr>
        <button type="button" id="Aceptar">Aceptar</button>
      </tr><br>
  </form>
</body>

</html>

Only that I need to center it so that it shows in this way:

html css

asked by ARR 10.07.2018 в 23:17

source

3 answers

2

To align your form horizontally use

text-align: center;

and to align it vertically:

display:table-cell;
vertical-align:middle;

body {}

.PrincipalForm {
  margin: 0 auto;
  border: 1px solid #666666;
  width: 310px;
  height: 600px;
  text-align: center;
  display:table-cell;
  vertical-align:middle;
}

.TblLogin {
  margin: 0 auto;
}

#usuario {
  width: 150px;
}

#password {
  width: 150px;
}

#Aceptar {
  width: 150px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Login</title>
  <link rel="stylesheet" href="css/estiloLogin.css" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>

<body>
  <form class="PrincipalForm">
    <table class="TblLogin">
      <tr>
        <label>Usuario:</label>
      </tr><br>
      <tr>
        <input type="text" id="usuario">
      </tr><br>
      <tr>
        <label>Password:</label>
      </tr><br>
      <tr>
        <input type="password" id="password">
      </tr><br>
      <tr>
        <button type="button" id="Aceptar">Aceptar</button>
      </tr><br>
      </table>
  </form>
</body>

</html>

answered by 10.07.2018 в 23:27

1

You only need to add text-align: center to your form like this:

body {}

.PrincipalForm {
  margin: 0 auto;
  border: 1px solid #666666;
  width: 310px;
  height: 600px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

.TblLogin {
  margin: 0 auto;
}

#usuario {
  width: 150px;
}

#password {
  width: 150px;
}

#Aceptar {
  width: 150px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Login</title>
  <link rel="stylesheet" href="css/estiloLogin.css" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>

<body>
  <form class="PrincipalForm">
    <table class="TblLogin">
      <tr>
        <label>Usuario:</label>
      </tr><br>
      <tr>
        <input type="text" id="usuario">
      </tr><br>
      <tr>
        <label>Password:</label>
      </tr><br>
      <tr>
        <input type="password" id="password">
      </tr><br>
      <tr>
        <button type="button" id="Aceptar">Aceptar</button>
      </tr><br>
      </table>
  </form>
</body>

</html>

answered by 10.07.2018 в 23:22

Unable to read property when merging two entities into one Decorator with parameters in Python

score 2 · Accepted Answer

First of all, keep an eye on the structure of the table, you did not close the label and you forgot to use the TD tags. If you do not use them, some browsers can override the table and remove its properties in the process.

Wrongly typing the structure of the table caused your form to not line up horizontally.

Now, to align an element vertically there are several tricks with CSS, one of them is to try that two elements behave as if they were a table with a cell inside so that the one that behaves as a cell has the same properties of an HTML cell and can be aligned vertically.

In this case, modify your code so that the form has the property display: table and create a div that contains your table, which will have the property display: table-cell .

body {}

.PrincipalForm {
margin: 0 auto;
border: 1px solid #666666;
width: 310px;
height: 600px;
}

table td{
    padding-top: 10px;
    padding-bottom:10px;
}

.centrar{
  display: table;
}
.centrar>div{
  display: table-cell;
  vertical-align: middle;
}

.TblLogin {
margin: 0 auto;
}

#usuario {
width: 150px;
}

#password {
width: 150px;
}

#Aceptar {
width: 150px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Login</title>
  <link rel="stylesheet" href="css/estiloLogin.css" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>

<body>
  <form class="PrincipalForm centrar">
    <div>
      <table class="TblLogin">
        <tr>
          <td><label>Usuario:</label></td>
        </tr>
        <tr>
          <td><input type="text" id="usuario"></td>
        </tr>
        <tr>
          <td><label>Password:</label></td>
        </tr>
        <tr>
          <td><input type="password" id="password"></td>
        </tr>
        <tr>
          <td><button type="button" id="Aceptar">Aceptar</button></td>
        </tr>
      </table>
  </form>
  </div>
</body>

</html>