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

CSS CSS Selectors Selectors - Beyond the Basics Child, Adjacent, and General Sibling Combinators

Posted by Cool Beans
Cool Beans
6,937 Points

i 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Treehouse Project Reviewer
Travis Alstrand
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Treehouse Project Reviewer

Hi 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
Cool Beans
6,937 Points
Cool Beans
Cool Beans
6,937 Points

Hi Travis!

Thank you for your reply. Yes, I already went through flex. I run an experiment and your way works.