wake-up-neo.net

So zentrieren Sie das Formular in Bootstrap 3

Wie kann ich mein Anmeldeformular zentrieren? Ich benutze Bootstrap-Spalte, aber es funktioniert nicht.

Hier ist mein Code:

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-6">
            <h2>Log in</h2>   
            <div>
                <table>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>3</td>
                    </tr>
                 </table>
             </div> 
        </div>
    </div>
</div>
htmlcsstwitter-bootstraptwitter-bootstrap-3
53
Cieja

Ein einfacher Weg ist das Hinzufügen 

.center_div{
    margin: 0 auto;
    width:80% /* value of your choice which suits your alignment */
}

zu deiner Klasse .container. Addiere width:xx % und du bekommst ein perfekt zentriertes div!

z.B :

<div class="container center_div">

aber ich habe das Gefühl, dass container standardmäßig in BS zentriert ist!

48
NoobEditor

Dies ist auf einfache Weise in bootstrap möglich. Wann immer ich ein Div-Zentrum auf einer Seite erstellen möchte, teile ich alle Spalten durch 3 (gesamte Bootstrap-Spalten = 12, geteilt durch 3 >>> 12/3 = 4). Die Division durch vier ergibt drei Spalten. dann setze ich mein div in die mittlere Spalte. Und all diese Mathematik wird auf diese Weise ausgeführt:

<div class="col-md-4 col-md-offset-4">my div here</div>

col-md-4 macht eine Spalte mit 4 Bootstrap-Spalten. Man kann sagen, dass es die Hauptspalte ist. col-md-offset-4 fügt auf beiden Seiten der Hauptspalte eine Spalte (mit der Breite von 4 Bootstrap-Spalten) hinzu.

192
Sid

Die Gesamtspalte in einer Zeile muss sich auf 12 summieren. Sie können also col-md-4 col-md-offset-4 ausführen. So teilen Sie Ihre Spalten in 3 Gruppen mit jeweils 4 Spalten auf. Im Moment haben Sie ein 4-Spalten-Formular mit einem Versatz von 6, so dass Sie nur 2 Spalten auf der rechten Seite Ihres Formulars erhalten. Sie können auch col-md-8 col-md-offset-2 ausführen, wodurch Sie eine 8-Spaltenform mit jeweils 2 Spalten links und rechts oder col-md-6 col-md-offset-3 (6-Spaltenform) erhalten mit 3 Spalten auf jeder Seite) usw.

8
user2431058

verwenden Sie eine zentrierte Klasse mit einem Offset-6 wie im Beispiel.

<body class="container">
<div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
</div>

6
Ammar

Ich vermute, Sie versuchen, das Formular sowohl horizontal als auch vertikal in Bezug auf das beliebige Container-Div zu zentrieren.

Sie müssen dafür nicht Bootstrap verwenden. Verwenden Sie einfach die beliebte Methode (unten), um das Formular zu zentrieren.

.container{
 position relative;
}
.form{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}
2
sujithuix

Verwenden Sie d-flex in der container-Klasse und fügen Sie dann justify-content-center und align-items-center hinzu.

<div class="d-flex justify-content-center align-items-center container ">  
   <div class="row ">
        <form action="">
            <div class="form-group">
                <label for="inputUserName" class="control-label">Enter UserName</label>
                <input type="email" class="form-control" id="inputUserName" aria-labelledby="emailnotification">
                <small id="emailnotification" class="form-text text-muted">Enter Valid Email Id</small>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="control-label">Enter Password</label>
                <input type="password" class="form-control" id="inputPassword" aria-labelledby="passwordnotification">
            </div>
        </form>
    </div>
</div>
1
SuRa

Verwenden Sie einfach das mittlere Tag:

<center>StackOverflow centered</center>

0
DINOLIN Y P JOB