Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Peter Midtvedt
5,059 PointsHow to align button to the center of the parent div?
I'm very new to web design and coding. Today I tried to make my own "sign in" form, but I got into some trouble. Why is'nt my "sign in" button aligning at the center of my div container? I also want to align my inputs at the center of the div.
My html markup looks like this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sign In</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="background"> <div class="container"> <div class="header-sign-in"> <h1>Sign in</h1> </div> </div> <div class="main-body"> <div class="inputs"> <input form="name"> <input form="password"> </div> <button form="button">Sign in</button> </div> </div> </body> </html>
My css stylesheet looks like this:
body { width: 100%; background-color: #6aa0dc; margin: 0 auto; padding: 0; }
.container { width: 20%; margin: 0 auto; background-color: #335d8c; }
h1 { text-align: center; color: aliceblue; font-family: "Blenda Script Regular", 'decorative', sans-serif; font-size: 2.1em; margin: 0 auto; padding: 15px; }
.main-body { margin: 0 auto; background-color: aliceblue; width: 20%; padding: 10px 0; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
.inputs { margin: 10px; }
input { display: block; margin-top: 30px; background-color: #c3cbd2; padding: 4px 2px; width: 80%; border-radius: 10px; border: none; }
button { margin: 0 auto; display: inline-block; width: 30%; border-radius: 10px; border: none; padding: 10px 20px; color: aliceblue; background-color: #d6a844; }
5 Answers
Justin Olson
13,792 PointsSorry it took a few moments, always happy to help. :)
For this, do as follows:
Remove the "display: block;" from your input field, and add "text-align: center;".
Justin Olson
13,792 PointsNo worries. I tried your exact code. Go with this:
.main-body button { display: block; margin: 0 auto; }
Peter Midtvedt
5,059 PointsAwesome! Thank you so much!
Peter Midtvedt
5,059 PointsI would also like the input elements to be centered. Do you see any fixes for that? Much appreciated anyways:)
Justin Olson
13,792 PointsGood times, and welcome to the wonderful world of coding! What I'd do, and hopefully it'll work, is use a margin: auto syntax. Try as follows:
.main-body button { margin: auto; }
Give that a shot. You could also throw the button inside it's own div, give it a class and try it that way as well. :)
Peter Midtvedt
5,059 PointsThank you Justin! Glad to be here :) seems like an awesome community and learning site! Registered last week and I'm already about to finish the web design track :D
I've tried what you said, but it didn't seem to change anything...
body {
width: 100%;
background-color: #6aa0dc;
margin: 0 auto;
padding: 0;
}
.container {
width: 20%;
margin: 0 auto;
background-color: #335d8c;
}
h1 {
text-align: center;
color: aliceblue;
font-family: "Blenda Script Regular", 'decorative', sans-serif;
font-size: 2.1em;
margin: 0 auto;
padding: 15px;
}
.main-body {
margin: auto;
background-color: aliceblue;
width: 20%;
padding: 10px 0;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.inputs {
margin: 10px;
}
input {
display: block;
margin-top: 30px;
background-color: #c3cbd2;
padding: 4px 2px;
width: 80%;
border-radius: 10px;
border: none;
}
button {
margin: auto;
width: 30%;
border-radius: 10px;
border: none;
padding: 10px 20px;
color: aliceblue;
background-color: #d6a844;
text-align: center;
}
.main-body button {
margin: auto;
}
Justin Olson
13,792 PointsGotcha, ok...try this.
.main-body button { margin: 0 auto; }
Possible add "display: block;"
Peter Midtvedt
5,059 PointsStill no change... :/
Nnanna Okoli
Front End Web Development Techdegree Graduate 19,181 Pointsthis thread did not help me too..