Question

我试图将表单内容集中在一起。但是即使在设置了display：block for form容器之后然后应用text-align：center;我做了另一个工作就是填充padding：0 33％它集中了表单内容，但具有不同的视图端口大小，它会缩小文本框的大小。我想使表单元素居中，并希望它们占用容器大小，请解释为什么会发生这种情况，以及我忽略了什么。我想要它能够适用于所有视口大小。我想知道造成这种情况的原因甚至覆盖了内联代码

Demo

CSS

 #Banner{
         background:url('http://i67.tinypic.com/midkki.png') no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
         width:100%;
         min-height:960px;


         }
         #Menu{
          min-height:120px;

         }
         body,html{
         padding:0;
         margin:0;
         }
         .nopm{
         padding:0;
         margin:0;
         }
        #Menu ul{
          padding:0;
         margin:0;



         }
        #Menu li{
         list-style:none;
         float:left;
         padding:1em .3em;
         float:left;
         margin:2em 0;

         }
         #Menu a{

           text-decoration:none;
           font-family: Rockwell,Courier Bold,Courier,Georgia,Times,Times New Roman,serif; 
        font-size: 24px;
        font-style: normal;
        font-variant: normal;
        font-weight: 600;
        line-height: 28px;
        color:#fff;
        margin:1em .5em;
        padding:10px;
        border:2px solid #fff;

         }
         a:hover{ 

          border:4px solid #FFD700;
            -webkit-transition-delay: 2s; /* Safari */
        transition-delay: 2s;
         }
           @media (max-width:420px){

        li{

            width:100%;
      text-align:center;

        }
          img{
       display:block;
       width:90px;
       height:90px;
       margin:0 auto;
      }
      }
    h1,h3{color:#fff;
        text-align:center;

        }
        #Slogan
    {
    padding:2em 0;
    }
    #SignUpWrapper{
    width:100%;
     text-align: center;
    display:block;
    }
    form{

    width:100%;
    }
    input[type="text"],[type="email"],[type="password"]{
    font-family: Rockwell,Courier Bold,Courier,Georgia,Times,Times New Roman,serif; 
        font-size: 19px;
        font-style: normal;
        font-variant: normal;
        font-weight: 600;
        line-height: 25px;
        color:#000 !important;
    padding:.5em;
    width:100%;

    }

HTML

<body>
<div id="Banner">
<div id="Menu">
<div class="row nopm">
<div class="col-lg-3 col-md-3 col-sm-2">
</div>
 <div class="col-lg-1 col-md-1 col-sm-1">
   <img src="http://i66.tinypic.com/xpon69.png" />
 </div>
 <div class="col-lg-3 col-md-1 col-sm-1">
</div>
<div class="col-lg-3 col-md-5 col-sm-7">
    <ul>
        <li>
            <a href="#">Events</a>
        </li>
        <li>
            <a href="#">Login</a>
        </li>
    </ul>
</div>
<div class="col-lg-2 col-md-2 col-sm-1">
</div>
</div>

</div>
<div id="Slogan">
<div class="row nopm">
<div class="col-lg-4 col-xs-12">
</div>
<div class="col-lg-4 col-xs-12">

<h1>
Welcome to Meet Up Place
</h1>
<h3>
SignUp to create your own events
</h3>
</div>
<div class="col-lg-4 col-xs-12">
</div>
</div>
</div>
<div id="SignUp">
<div class="row nopm">
<div class="col-lg-4  col-md-4 col-sm-4 col-xs-12">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div id="SignUpWrapper">
                    <form  autocomplete="on">
                        <div class="InputWrapper"> 
                            <div class="input-group">
                                <label for="fName" style="    display: block;text-align:center;">First Name</label>
                            </div>
                            <div class="input-group">
                                 <input class="form-control" id="fName" type="text" placeholder="First Name"   >
                             </div>
                        </div>
                        <div class="InputWrapper"> 
                            <div class="input-group">
                            <label for="lName">Last Name</label>
                            </div>
                                <div class="input-group">
                            <input id="lName" type="text" placeholder="Last Name" />
                            </div>
                        </div>
                        <div class="InputWrapper"> 
                              <div class="input-group">
                            <label for="lName">E-Mail</label>
                                </div>
                                <div class="input-group">
                            <input id="lName" type="email" placeholder="E-Mail" />
                                </div>
                        </div>


                    </form>
                </div>

</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
</div>
    </div>
        </div>
</div>
</body>

Answer 1

放display: inline-block;并删除width: 100%;上的form即可。

See it here

如果您想将内部内容居中，请尝试以下方法：

.input-group { display: block !important; }
.form-control, input[type="text"], [type="email"], [type="password"] { text-align : center !important;}

我使用!important因为样式位于HTML面板而不是CSS面板中。

您的内联样式已应用：

Answer 2

在CSS代码中添加此内容以使所有表单行居中：

    .input-group {
       margin: 0 auto;
    }

这是以div为中心的

或

    .input-group {
       width: 100%;
    }

这是为了放大div，因此文本可以居中。

文本对齐：即使在设置display：block后，center也无法工作

2 个答案: