Как центрировать форму в 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>
6   51   2013-12-31 10:42:57

6 ответов:

простой способ добавить

.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!

есть простой способ сделать это в Bootstrap. Всякий раз, когда мне нужно сделать div-центр на странице, Я разделяю все столбцы на 3 ( total bootstrap columns = 12, разделенный на 3 >>> 12/3 = 4). Деление на четыре дает мне три колонки. затем я поместил свой div в среднюю колонку. И вся эта математика выполняется таким образом:

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

col-md-4 делает один столбец из 4 столбцов начальной загрузки.Допустим, это главная колонка. col-md-offset-4 добавьте один столбец (шириной 4 столбца начальной загрузки) с обеих сторон главная колонна.

общее количество столбцов в строке должно составлять до 12. Таким образом, вы можете сделать col-md-4 col-md-offset-4. Таким образом, вы разбиваете свои столбцы на 3 группы по 4 столбца каждая. Прямо сейчас у вас есть форма с 4 столбцами со смещением на 6, поэтому вы получаете только 2 столбца в правой части своей формы. Вы также можете сделать col-md-8 col-md-offset-2, который даст вам форму столбца 8 с 2 столбцами каждый из пространства слева и справа или col-md-6 col-md-offset-3 (Форма столбца 6 с пространством столбцов 3 с каждой стороны), так далее.

используйте центрированный класс со смещением-6, как показано ниже образца.

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

использовать d-flex на container класса, а затем добавить 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>

Я думаю, вы пытаетесь центрировать форму как по горизонтали, так и по вертикали относительно любого контейнера div.

вам не нужно использовать bootstrap для этого. Просто используйте популярный метод (ниже), чтобы центрировать форму.

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