CODEWITHSUNDEEP
htmlcss
Heta YouTubers
Heta YouTubers

Reputation: 87

How do I vertically align an input in a DIV

I'm creating a website, and I have a login-field that contains two inputs. I want to vertically align those items inside the DIV.

Here's my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Instagram tweaks</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <p>INSTATWEAKS</p>
    </header>
    <div class="loginbar">
        <input type="text"    name="username" id="username" class="input">
        <input type="password" name="password" id="password" class="input">
    </div>
</body>
</html>

And the CSS:

.loginbar {
    width: 800px;
    height: 400px;
    box-sizing: border-box;
    margin: auto auto;
    display: block;
    box-shadow: 0 0 10px black;
    color: orange;
    margin-top: 200px;
}

header {
    width: 100%;
    height: 50px;
    text-align: center;
    background-color: #111;
    position: absolute;
    top: 0;
}

body {
    margin: 0;
    padding: 0;
}

.input {
    font-size: 22px;
    vertical-align: text-top;
    text-align: center;
}

p {
    font-size: 30px;
    color: lightblue;
    margin-top: 10px;
    font-weight: bold;
}

I want the inputs inside the div with the class 'loginbar' to be vertically centered

Upvotes: 4

Views: 15337

Answers (4)

R J
R J

Reputation: 505

.textField-center {
    margin: auto auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

OR

.textField-center {
    justify-content: center;
}

USE This CSS

Upvotes: 0

Levi Stroop
Levi Stroop

Reputation: 70

Since you have a set height for .loginbar, you could give it a line-height with the same value, then give .input { vertical-align: middle; }. And just in case you want to horizontally align, add another div to your html around the two inputs. Give this div a set width, I went with 530px, that is about what the two inputs beside each other are, then give the div margin: 0 auto;

With this, the inputs are centered entirely.

Remove code to achieve what you want.

Best, Levi

.loginbar {
  width: 800px;
  height: 400px;
  box-sizing: border-box;
  margin: auto auto;
  display: block;
  box-shadow: 0 0 10px black;
  color: orange;
  margin-top: 200px;
  line-height: 400px;
}

header {
  width: 100%;
  height: 50px;
  text-align: center;
  background-color: #111;
  position: absolute;
  top: 0;
}

body {
  margin: 0;
  padding: 0;
}

.center {
  width: 530px;
  margin: 0 auto;
}

.input {
  font-size: 22px;
  text-align: center;
  vertical-align: middle;
}

p {
  font-size: 30px;
  color: lightblue;
  margin-top: 10px;
  font-weight: bold;
}
<header>
        <p>INSTATWEAKS</p>
    </header>
    <div class="loginbar">
      <div class="center">
        <input type="text"    name="username" id="username" class="input">
        <input type="password" name="password" id="password" class="input">
      </div>
    </div>

Upvotes: 1

Miguel
Miguel

Reputation: 20633

You need to wrap your input fields in a container element, and then use flexbox to vertically align and center the container:

.loginbar {
  display: flex;
  align-items: center;
  justify-content: center;
  ...
}

JSFiddle demo: https://jsfiddle.net/092215c2/1/

Upvotes: 5

Czeran
Czeran

Reputation: 319

Use diplay: flex

https://codepen.io/Czeran/pen/mMWNwP

.loginbar {
    width: 800px;
    height: 400px;
    box-sizing: border-box;
    margin: auto auto;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px black;
    color: orange;
    margin-top: 200px;
}

Upvotes: 6

Related Questions