Centering Textbox inside Div Tag - html

Question

I am trying to center my text box within the div. I have searched and tried. I even tried centering the input box alone with a margin of 0 but had no such luck. Please help.
Here is the JS Fiddle I made to aid with helping. Also there is a strange white space at the bottom. Please see the fiddle. Thanks a lot.
HTML:
<footer>
<div class="footerContainer">
<div class="footerLeft">
<h3>CONTACT US</h3>
<br />
<form name="contact" action="">
<table cellpadding="10">
<tr>
<td>
<label for="name" id="name_label"></label>
</td>
<td>
<input type="text" name="name" id="name" size="50" value="" class="text-input" placeholder="Your Name"/>
<label class="error" for="name" id="name_error"><br />This field is required.</label>
</td>
</tr>
<tr>
<td>
<label for="email" id="email_label"></label>
</td>
<td>
<input type="text" name="email" id="email" size="50" value="" class="text-input" placeholder="Your Email"/>
<label class="error" for="email" id="email_error"><br />This field is required.</label>
</td>
</tr>
<tr>
<td>
<label for="comment" id="comment_label"></label>
</td>
<td>
<textarea name="comment" id="comment" rows="8" cols="50" placeholder="Your Message"/></textarea>
<label class="error" for="comment" id="comment_error"><br />This field is required.</label>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="submit" class="button" id="submit_btn" value="Submit" />
</td>
</tr>
</table>
</form>
</div>
<div class="footerRight">
<h3>CABRINI REPERTORY THEATRE</h3>
<sub>701 Fort Washington Avenue</sub>
<br />
<h3>Get Social</h3>
<br />
<span class="fa fa-facebook fa-3x"></span> <span class="fa fa-twitter fa-3x"></span> <span class="fa fa-vimeo-square fa-3x"></span> <span class="fa fa-instagram fa-3x"></span>
</div>
</div>
</footer>
CSS:
footer{
width: 100%; min-height: 375px;
background-color: #3772ab;
border-top: 3px solid #1f3e5f;
padding: 30px;
color: #FFF;
}
footer .footerContainer{
width: 80%; height: 325px;
margin: 0 auto;
border: 3px solid #F00;
}
footer .footerLeft{
width: 45%;
padding: 0 10px 0 0;
margin: 0 10px 0 0;
float: left;
display: inline-block;
border: 3px solid #F00;
}
footer .footerRight{
width: 45%;
padding: 0 0 0 10px;
margin: 0 0 0 10px;
float: right;
display: inline-block;
border: 3px solid #F00;
}
#media screen and (max-width: 1225px) {
footer{
min-height: 500px;
width: 100%;
text-align:center;
margin: 0 auto;
border: 3px solid #F00;
}
footer .footerLeft{
width: 100%;
display: block;
color: #fff;
margin: 0 0 30px 0;
padding: 0;
border: 3px solid #F00;
float: none;
}
footer input[type=text], footer textarea{
display: block;
margin : 0 auto;
position:relative;
border: 3px solid #F00;
}
footer .footerRight{
width: 100%;
display: block;
margin: 0;
border: 3px solid #F00;
float: none;
}
}
footer input[type=text], footer textarea{
-webkit-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
padding: 10px;
background: #fff;
margin: 0 0 10px 0;
}

Answer 1

You need to add text-align: center to parent in this case I have added it to td
And remove display: block of footer input[type=text], footer textarea
Check this
td {
text-align: center
}
footer input[type=text], footer textarea{
/*display: block;*/}

Answer 2

Hey there #SavionSmith
I reformed the form by getting rid of tables and using a list, it's much easier and cleaner (try to avoid tables).
HTML:
<footer>
<div class="footerContainer">
<form name="contact" action="">
<div class="footerLeft">
<h2>CONTACT US</h2>
</div>
<ul >
<li id="li_1" >
<label class="description" for="name"> Field Required </label>
<div>
<input id="name" name="name" class="text-input" placeholder="Your Name" type="text" maxlength="255" value=""/>
</div>
</li> <li id="li_2" >
<label class="description" for="email"> Field Required </label>
<div>
<input id="email" name="email" class="text-input" placeholder="Your Email" type="text" maxlength="255" value=""/>
</div>
</li> <li id="li_3" >
<label class="description" for="comment">Field Required </label>
<div>
<textarea id="comment" name="comment" class="element textarea medium" placeholder="Your Message" ></textarea>
</div>
</li>
<li class="buttons">
<input style="border: none;width: auto;" class="button" id="submit_btn" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
</div>
</footer>
CSS:
form textarea,
form input { width: 50%; }
form ul
{
font-size:100%;
list-style-type:none;
margin:0;
padding:0;
width:100%;
}
form li
{
display:block;
margin:0;
padding:4px 5px 2px 9px;
position:relative;
}
.buttons
{
clear:both;
display:block;
margin-top:10px;
}
h2, h3, label
{
text-align: center;
display: block;
}
form {
margin: 0 auto;
}
input, textarea
{
border: solid #ef2;
display: block;
margin: 0 auto;
}
footer{
background-color: #3772ab;
border-top: 3px solid #1f3e5f;
padding: 30px;
color: #FFF;
}
footer .footerContainer{
margin: 0 auto;
border: 3px solid #F00;
}
footer .footerLeft{
border: 3px solid #F00;
}
footer .footerRight{
width: 45%;
padding: 0 0 0 10px;
margin: 0 0 0 10px;
border: 3px solid #F00;
}
#media screen and (max-width: 1225px) {
footer{
min-height: 500px;
text-align:center;
margin: 0 auto;
border: 3px solid #F00;
}
footer .footerLeft{
color: #fff;
border: 3px solid #F00;
}
footer input[type=text], footer textarea{
display: block;
margin : 0 auto;
border: 3px solid #F00;
}
footer .footerRight{
display: block;
border: 3px solid #F00;
}
}
footer input[type=text], footer textarea{
-webkit-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
background: #fff;
}
JSFiddle: http://jsfiddle.net/Jhb9q/10/
The form will keep re-sizing while the browser window changes size!
The form input { width: 50%; } controls the width size of the inputs except the submits button because I tried to exclude it using style="border: none;width: auto;" in its tag.
Also I tried to make the text a little bit more flexible.
You can change the design using CSS as you want, Hope this helps!