如何居中对齐形式的内部标签的div

问题描述：

我要居中对齐表格内div.login__box标签如何居中对齐形式的内部标签的div

我用引导3.3.7

这就是我想要的

<form class="form-horizontal"> 
    <div class="form-group"> 
    <label class="control-label col-sm-2" for="login">логин</label> 
    <div class="col-sm-8"> 
     <input type="login" class="form-control" id="login" required> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-sm-2" for="pwd" >пароль</label> 
     <div class="col-sm-8"> 
     <input type="password" class="form-control" id="pwd" required> 
     </div> 
     </div> 
     <div class="form-group"> 
     <label class="control-label col-sm-2" for="btn" /> 
     <div class="col-sm-4"> 
      <input type="button" class="form-control login__btn-login" id="btn" value="войти в личный кабинет"> 
      </div> 
     </div> 
     </form>

我当前的标记是在这里 codepen.io

Codepen和相关的html不匹配 –

答

的微小变化：

<head> 
    <meta charset="UTF-8"> 
     <title>#</title> 
     <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
     </head> 

     <body> 
      <div class="jumbotron vertical-center"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-4 about__box"> 
        <div class="about__inner"> 
         <div class="about__content"> 
         <div class="about__header">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> 

         <div class="about__desc">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div> 
         </div> 
        </div> 
        </div> 
        <div class="col-md-8 login__box"> 
        <div class="login__inner"> 
         <div class="text-center login__header"> 
    Authorization 
         </div> 
         <div class="container login__container"> 
         <form class="form-horizontal"> 
          <div class="form-group"> 
          <label class="control-label col-sm-2 col-sm-offset-2" for="login">log in</label> 
          <div class="col-sm-6"> 
           <input type="login" class="form-control" id="login" required> 
           </div> 
          </div> 
          <div class="form-group"> 
           <label class="control-label col-sm-2 col-sm-offset-2" for="pwd" >password</label> 
           <div class="col-sm-6"> 
           <input type="password" class="form-control" id="pwd" required> 
           </div> 
           </div> 
           <div class="form-group"> 
           <label class="control-label col-sm-2 col-sm-offset-2" for="btn" ></label> 
           <div class="col-sm-4"> 
            <input type="button" class="form-control login__btn-login" id="btn" value="submit"> 
            </div> 
           </div> 
           </form> 
           <div class="control-label col-sm-2"></div> 
           <div class="col-sm-8 login__desc"> 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
           </div> 
          <img src="" class="pull-right img-responsive login__img_people"> 
          </div> 

          </div> 
         </div> 
        </div> 
        </div> 
       </div> 
          <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
       </body>

添加到您的CSS：

.form-horizontal .control-label{ 
    margin-right:0; 
}

附加codepen linksas得好：

http://codepen.io/Sky-123/pen/WGOOqq?editors=1100

希望这有助于！

答

添加margin-right:auto和margin-left:auto到.login__inner，并且必须设置宽度：

.login__inner{ 
    width: 90%; 
    margin-left: auto; 
    margin-right: auto; 
}

答

只需添加类COL-LG-3偏移到窗体

到HTML制作

<form class="form-horizontal col-lg-3-offset col-lg-6"> 
    <div class="form-group"> 
    <label class="control-label col-sm-2" for="login">логин</label> 
    <div class="col-sm-8"> 
     <input type="login" class="form-control" id="login" required> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-sm-2" for="pwd" >пароль</label> 
     <div class="col-sm-8"> 
     <input type="password" class="form-control" id="pwd" required> 
     </div> 
     </div> 
     <div class="form-group"> 
     <label class="control-label col-sm-2" for="btn" /> 
     <div class="col-sm-4"> 
      <input type="button" class="form-control login__btn-login" id="btn" value="войти в личный кабинет"> 
      </div> 
     </div> 
     </form>

如何居中对齐形式的内部标签的div

相关推荐