Reputation:
Newbie to CSS so bear with me. I am trying to vertically stack different items in HTML/CSS and can't get them to stack vertically with custom spacing. Here is what I have so far.
<p id="loginView">
<input type="text" id="usernameField">
<div></div>
<input type="password" id="passwordField">
<button id="loginButton">Login</button>
</p>
#loginView {
text-align: center;
}
The output is all of the fields, username, password and button horizontally viewed. I am trying to get them stacked vertically and centered properly.
Upvotes: 0
Views: 310
Reputation: 4178
You should use the semantic HTML
.formWrapper {max-width: 400px; margin:0 auto;}
.text-center {
text-align: center;
}
input {width: 100%;margin-bottom: 10px;}
<form class="formWrapper">
<div class="form-group">
<input type="text" id="usernameField">
</div>
<div class="form-group">
<input type="password" id="passwordField">
</div>
<div class="form-group text-center">
<button id="loginButton">Login</button>
</div>
</form>
Upvotes: 0
Reputation: 555
Try using dispaly: flex;
to get your items vertically aligned. Also I would advise you to use classes instead of id to reference your css styles. This is a sample code. Hope it helps you
HTML
<div class="d-flex flex-column align-items-start justify-content-center">
<input class="m-2" type="text" id="usernameField" />
<input class="m-2" type="password" id="passwordField" />
<button class="m-2" id="loginButton">Login</button>
</div>
CSS
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.align-items-start {
align-items: flex-start;
}
.justify-content-center {
justify-content: center;
}
.m-2 {
margin: 0.5rem;
}
JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/dwkxo1va/
Upvotes: 1
Reputation: 187
You could also just put <br>
tags in between each element within <p>
:
<p id="loginView">
<input type="text" id="usernameField">
<br>
<input type="password" id="passwordField">
<br>
<button id="loginButton">Login</button>
</p>
Upvotes: -1
Reputation: 1671
<div>
inside a p
tag. #loginView
to display:block
like so:#loginView {
text-align: center;
}
#loginView>* {
display: block;
}
<div id="loginView">
<input type="text" id="usernameField" />
<div></div>
<input type="password" id="passwordField" />
<button id="loginButton">Login</button>
</div>
Additional: For centering stuff and aligning it in a profound way I would suggest using flexbox, its easy and can be used for a lot of different things:
https://yoksel.github.io/flex-cheatsheet/
Upvotes: 1