So zentrieren Sie soziale Schaltflächen in der Bootstrap-Anmeldeseite?

Question

Ich benutze django-allauth, bootstrap, font awesome und bootstrap-social für die Social-Media-Login-Schaltflächen in meinem Login-Formular. Ich kann nicht herausfinden, wie ich die sozialen Knöpfe in meinem Login zentriere - und zwar unten. Es scheint sich rechts neben dem Login gut auszurichten anstatt zentriert zu sein. Was soll ich tun?

jsfiddle

html:

<div class="container"> 
    <div class="row row-centered"> 
    <div class="col-md-4 col-centered"> 
     <div class="well login-well"> 
     <div class="socialaccount_ballot col-md-11"> 
      <ul class="socialaccount_providers"> 
      <li> 
       <a title="Google" class="btn btn-block btn-social btn-md socialaccount_provider btn-google" href="/accounts/google/login/?process=+login+"> 
       <i class="fa fa-google"></i>Log in with Google 
       </a> 
      </li> 
      <li> 
       <a title="Facebook" class="btn btn-block btn-social btn-md socialaccount_provider btn-facebook" href="/accounts/facebook/login/?process=+login+"> 
       <i class="fa fa-facebook"></i>Log in with Facebook 
       </a> 
      </li> 
      <li> 
       <a title="Twitter" class="btn btn-block btn-social btn-md socialaccount_provider btn-twitter" href="/accounts/twitter/login/?process=+login+"> 
       <i class="fa fa-twitter"></i>Log in with Twitter 
       </a> 
      </li> 
      </ul> 
     </div> 
     <div class="col-md-12"> 
      <hr> 
      <form class="login" method="POST" action="/login/"> 
      <div class="form-group"><label class="control-label" for="id_login">Username</label><input autofocus="autofocus" class="form-control" id="id_login" maxlength="30" name="login" placeholder="Username" required="required" title="" type="text" /></div> 
      <div class="form-group"><label class="control-label" for="id_password">Password</label><input class="form-control" id="id_password" name="password" placeholder="Password" required="required" title="" type="password" /></div> 
<div class="form-group"><div class="checkbox"><label for="id_remember"><input class="" id="id_remember" name="remember" type="checkbox" /> Remember Me</label></div></div> 
      <div class="form-group pull-center"> 
       <button class="btn btn-primary btn-block" type="submit">Sign In</button> 
      </div> 
      </form> 
      <hr> 
     </div> 
     <div class="form-group"> 
      <small><a class="text-muted" href="/password_reset/">Forgot Password?</a></small> 
      <br> 
      <small><a class="text-muted" href="/signup/">Sign up</a></small> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

css:

.row-centered { 
    text-align:center; 
} 
.col-centered { 
    display:inline-block; 
    float:none; 
    /* reset the text-align */ 
    text-align:left; 
    /* inline-block space fix */ 
    margin-right:-4px; 
} 
.socialaccount_providers li a.socialaccount_provider { 
    rem-border: 1px solid #ddd; 
    border-radius: 2px; 
    rem-box-shadow: 2px 2px 8px rgba(0,0,0,.7); 
    -padding: 10px; 
    margin-bottom: 6px; 
    display: block; 
    width: 100%; 
    overflow: hidden; 
    rem-font-size: 1.2em; 

} 

.socialaccount_providers li a.socialaccount_provider:hover { 
    text-decoration: none; 
    box-shadow: 1px 1px 2px rgba(0,0,0,.7); 
} 

.socialaccount_providers li a.socialaccount_provider.facebook { 
    background: #4B67A3; 
    color: #fff; 
} 
.socialaccount_providers li a.socialaccount_provider.facebook:before { 
    font-family: FontAwesome; 
    font-size: 1.9em; 
    content: "\f082"; 
    display: inline-block; 
    padding-left: 8px; 
    padding-right: 8px; 
} 

Was ich es aussehen soll, wenn soziale Tasten zentriert sind:

Answer 1

Die ul.socialaccount_providers hat ein ungenau padding-left = 40px;

Nur werfen .socialaccount_providers {padding-left:0;} behebt es.