在Div标签内居中文本框

时间：2014-06-12 15:13:12

标签： html css

我正试图将我的文本框放在div中。我搜索过并试过了。我甚至尝试将输入框单独居中，边距为0，但没有运气。请帮忙。

以下是我为帮助提供帮助的JS Fiddle。底部还有一个奇怪的白色空间。请看小提琴。非常感谢。

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;
}

2 个答案:

答案 0 :(得分：1)

在这种情况下，您需要将text-align: center添加到父级我已将其添加到td

并移除display: block

的footer input[type=text], footer textarea

检查this 

td {
    text-align: center
}
footer input[type=text], footer textarea{
             /*display: block;*/}

答案 1 :(得分：1)

嘿那里@SavionSmith

我通过删除form并使用tables来改编list，它更容易和更清洁（尽量避免使用表格）。

<强> 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/

当浏览器窗口改变大小时，form将继续重新调整大小！ form input { width: 50%; }控制输入的宽度大小，但提交按钮除外，因为我尝试在其标记中使用style="border: none;width: auto;"将其排除。 此外，我试图让文本更灵活。

您可以根据需要使用CSS更改设计，希望这会有所帮助！

相关问题
最新问题