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 trialCool Beans
6,937 Pointsi am trying to understand how can I move .btn elements to the center. Tried everything and does not work.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Selectors</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/base-style.css">
<link rel="stylesheet" href="css/selectors.css">
</head>
<body>
<div id="container">
<form class="form-contact br">
<h1>Contact</h1>
<label for="name">Name:</label>
<input type="text" id="name">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="email@website.com">
<label for="msg">Message:</label>
<textarea id="msg" rows="7"></textarea>
<input class="btn default inln" type="submit" value="Submit">
<input class="btn error inln" type="reset" value="Reset">
</form>
<hr>
<img class="avatar rounded " src="img/avatar.png" alt="Mountains">
<form class="form-login">
<label for="username">Username:</label>
<input type="text" id="username">
<label for="password">Password:</label>
<input type="password" id="password">
<input class="btn" type="submit" value="Login">
<a href="#" target="_blank">Forgot your password?</a>
</form>
</div>.inln
</body>
</html>
CSS:
/* Attribute Selectors ------------- */
form.form-contact {
padding: 20px 24px;
background-color: #f4f7f8;
}
div[id="container"] {
max-width: 500px;
margin: auto;
}
input[type="email"]{
background: #fdfee6;
}
a[target= "_blank"] {
color: red;
text-decoration: none;
border-bottom: 1px dotted;
}
/* DRY Classes ------------- */
.br {
border-radius: .5em;
}
.avatar {
display: block;
margin: 0 auto 2em;
}
.rounded {
border-radius: 50%;
}
.btn {
cursor: pointer;
font-size: .875em;
font-weight: 400;
color: #fff;
padding-left: 20px;
padding-right: 20px;
text-transform: uppercase;
}
.btn:hover {
opacity: .75;
}
.default {
background-color: #52bab3;
}
.error {
background-color: #ff784f;
}
@media (min-width: 769px) {
.inln {
width: auto;
display: inline-block;
}
/* Combinators ------------- */
form > a {
font-size: .7em;
}
h1 ~ label {
background: tomato;
color: white;
padding: 5px;
}
2 Answers
Travis Alstrand
Data Analysis Techdegree Graduate 49,443 PointsHi there Cool Beans ! 👋
I assume you're referring to the two inputs with the class of .btn
in the top form right?
I'm not sure where you're at in your learning journey yet, but the easiest way I know of is to wrap those two .btn
inputs inside of a <div>
and select that div in the CSS. If you give that div a display: flex;
and justify-content: center;
you'll get what I expect are the desired results.
If you haven't started learning Flexbox yet, then you can disregard this, I don't want to further confuse or complicate things.
Another way you can accomplish this is to, again, wrap those inputs in a <div>
and select that div in the CSS. Give the div a text-align: center;
. Then select the two inputs within that div and give them
display: inline-block; /* Make the buttons inline-block elements */
margin: 0 5px; /* Just to give a little space in between them */
I hope this helps out a bit.
Cool Beans
6,937 PointsHi Travis!
Thank you for your reply. Yes, I already went through flex. I run an experiment and your way works.