Menu
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
729
asked Oct 28 '25 08:10
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;
}
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/
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
