it-swarm.com.ru

Как центрировать форму в начальной загрузке 3

Как я могу центрировать мою форму входа? Я использую колонку начальной загрузки, но она не работает.

Вот мой код:

<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>
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 (общее количество столбцов начальной загрузки = 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 столбца начальной загрузки) с обеих сторон основного столбца.

192
Sid

Всего столбцов в строке должно быть до 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 колонками на каждой стороне) и т. д.

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.

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

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

Используйте 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>
1
SuRa

Просто используйте центральный тег:

<center>StackOverflow centered</center>

0
DINOLIN Y P JOB