0

Very odd and I spent an hour today trying to figure out what I'm doing wrong. Have a email signup form. Four input fields and a submit button. In my design, the submit button should be centered under the four fields. However, instead the button is flush left aligned no matter whether I use or don't use float:left; or clear:both; or margin:0 auto; In other words, the usual suspects.

Here's the site. The form is on the bottom: http://ellismarsalis2017.jasonmarsalis.com/

Here's the code:

#footerForm {
  position: relative;
  float: none;
  width: 728px;
  height: auto;
  margin: 0 auto;
  padding: 18px auto 0;
}

footer form input {
  float: left;
  color: #2a358f;
  width: 44%;
  background: #edc53e;
  border-radius: 8px;
  margin: 0 2% 14px;
  font-size: 18px;
  padding: 0 .5%;
  border: none;
}

footer form input.signUp {
  font-family: "clarendon-urw", serif;
  float: none!important;
  clear: both;
  background: #2a358f;
  color: #edc53e;
  margin: 0 auto;
  font-size: 18px;
  padding: 8px 24px;
  border: none;
  text-align: center;
}

footer p {
  padding: 28px 0;
}
<div id="footerForm">
  <form name="" method="post" action="http://www.yoursite.com/box.php">
    <input name="name" type="text" id="name" value="Your Name">
    <input name="field1" type="text" id="field1" value="Your City">
    <input name="email" type="text" id="email" value="Your Email Address">
    <input name="field2" type="text" id="field2" value="Your State">
    <input name="p" type="hidden" id="p" value="7">
    <input type="hidden" name="nlbox[1]" value="1">
    <input type="submit" name="Submit" class="signUp" value="Sign me up for the Email List!">
  </form>
</div>
Fred Gandt
  • 4,217
  • 2
  • 33
  • 41
Adam Bell
  • 1,049
  • 1
  • 16
  • 50

1 Answers1

0

You should put it on DIV section and make it's style text-align:center like that:

<div style="text-align:center;">
    <input type="submit" name="Submit" class="signUp" value="Sign me up for the Email List!">
</div>

or with a class and css code :

HTML

<div class="submitsection">
    <input type="submit" name="Submit" class="signUp" value="Sign me up for the Email List!">
</div>

CSS

.submitsection {
    text-align:center;
}
Coderbora
  • 11
  • 2
  • I know and was thinking of just that but at the same time I was also not trying to introduce yet another nested div. – Adam Bell Jul 02 '17 at 04:07
  • Actually, I just figured out if I add a text-align: center; to the #footerForm div, it does align the text without affecting the input fields, which was my initial concern. Thanks so much for the help. – Adam Bell Jul 02 '17 at 04:10