web-dev-qa-db-ja.com

bootstrap 3でフォームを中央に配置する方法

ログインフォームを中央に配置するにはどうすればよいですか？ bootstrap列を使用していますが、機能していません。

ここに私のコードがあります：

<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

簡単な方法は追加することです

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

クラス.containerにwidth:xx %を追加すると、完全に中央揃えされたdivになります！

例：

<div class="container center_div">

しかし、デフォルトではcontainerはBSの中心にあると感じています！

48
NoobEditor

ブートストラップでこれを行う簡単な方法があります。ページのdivセンターを作成する必要があるときはいつでも、すべての列を3で分割します（合計bootstrap columns = 12、3で除算>>> 12/3 = 4）。 4で割ると、3列になります。次に、divを中央の列に配置します。そして、このすべての計算は次の方法で実行されます。

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

col-md-4は4つのbootstrap列の1つの列を作成します。メイン列としましょう。 col-md-offset-4は、メイン列の両側に1列（幅4 bootstrap列）を追加します。

197
Sid

行の合計列は12まで追加する必要があります。したがって、col-md-4 col-md-offset-4を実行できます。したがって、列をそれぞれ4列の3つのグループに分割します。現在、6オフセットの4列フォームがあるので、フォームの右側に2列しかありません。 col-md-8 col-md-offset-2を行うこともできます。これにより、左右にスペースがそれぞれ2列ある8カラム形式、またはcol-md-6 col-md-offset-3（6カラム形式両側に3列のスペースがある）など。

8
user2431058

以下のサンプルのように、オフセット6で中心クラスを使用します。

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

コンテナdivに対してフォームを水平および垂直の両方にセンタリングしようとしていると思います。

bootstrapを使用する必要はありません。一般的な方法（下記）を使用して、フォームを中央に配置します。

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

containerクラスでd-flexを使用してから、justify-content-centerとalign-items-centerを追加します。

<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

中央のタグを使用するだけです：

<center>StackOverflow centered</center>

0
DINOLIN Y P JOB