CODEWITHSUNDEEP
htmlcsscentering
Ethernetz
Ethernetz

Reputation: 978

Centering input and textarea not matching

Trying to center two inputs side by side, and a textarea just below it

form ul {
  list-style: none;
  text-align: center;
}
form ul li {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
#nameform,
#emailform,
#messageform {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-color: #cfcfcf;
  font-size: 15px;
  border: 1px solid #ccc;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 4px 7px;
  outline: 0;
  -webkit-appearance: none
}
#nameform,
#emailform {
  margin-left: auto;
  margin-right: auto;
  height: 35;
}
#messageform {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
<div id="contactform">
  <form>

    <ul>
      <li>
        <input type="text" name="name" placeholder="name" id="nameform" size="35"></input>
      <li>
      <li>
        <input type="text" name="email" placeholder="email" id="emailform" size="35">
        </innput>
      <li>
    </ul>

    <textarea type="text" name="message" placeholder="Message" id="messageform" rows="4" cols="80"></textarea>
  </form>

</div>

And for some reason it is displayed on google and IE as this: Image showing inconsistent centering

How can i make it so the textarea is completely centered underneath the two inputs?

Upvotes: 1

Views: 36

Answers (2)

user4639281
user4639281

Reputation:

Many syntax errors, many unnecessary settings (and some that may be necessary for your styling purposes, but are not necessary to solve the problem).

The following is how I would approach this issue.

form ul {
  list-style: none;          /* Remove bullets */
  margin: 0;                 /* Remove list spacing */
  font-size: 0;              /* Remove white-space between inline-block tags */
  padding: 5px;              /* A little bit of spacing */
}
form ul li {
  display: inline-block;     /* Allow the list items to be on the same line */
  width: 50%;                /* list items should be half-width */
  box-sizing: border-box;    /* Declared sizes should include padding */
  padding: 5px;              /* A little bit of spacing */
}
form ul li:nth-child(3) {
  width: 100%;               /* The third list item should be full-width */
}
form ul li input,
#messageform {
  width: 100%;               /* the inputs and textarea should be full-width */
  box-sizing: border-box;    /* Declared sizes should include padding */
}

/* Environment */ body { margin: 0; }
<div id="contactform">
  <form>
    <ul>
      <li>
        <input type="text" name="name" placeholder="name" id="nameform">
      </li>
      <li>
        <input type="text" name="email" placeholder="email" id="emailform">
      </li>
      <li>
        <textarea type="text" name="message" placeholder="Message" id="messageform" rows="4"></textarea>
      </li>
    </ul>
  </form>
</div>

Upvotes: 0

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9449

You had some syntax errors, and I made small changes https://jsfiddle.net/DIRTY_SMITH/fedz7nx7/2/

form ul{
 list-style: none;
 text-align:center;
}

form ul li {
 display: inline-block;
 margin-left: auto;
 margin-right: auto;
}


#nameform, #emailform, #messageform {
 font-family: 'Open Sans', sans-serif;
 font-weight: 300;
 font-color: #cfcfcf; 
 font-size: 15px;
 border: 1px solid #ccc;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 padding: 4px 7px;
 outline: 0;
 -webkit-appearance: none
}

#nameform, #emailform {
  margin-left: auto;
  margin-right: auto;
  height: 35;
}

#messageform {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

Upvotes: 1

Related Questions