Как я могу централизовать мою регистрационную форму? Я использую столбец начальной загрузки, но он не работает.
Вот мой код:
<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>
Простым способом является добавление
.center_div{
margin: 0 auto;
width:80% /* value of your choice which suits your alignment */
}
вам класс .container.Add width:xx % к нему, и вы получите идеально центрированный div!
например:
<div class="container center_div">
но я чувствую, что по умолчанию container центрируется в BS!
В бутстрапе есть простой способ сделать это. Всякий раз, когда мне нужно создать 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 столбца начальной загрузки) в обе стороны основного столбца.
Всего столбцов в строке должно быть до 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>
Полагаю, вы пытаетесь центрировать форму как по горизонтали, так и по вертикали относительно любого контейнера div.
Вам не нужно использовать bootstrap для этого. Просто используйте популярный метод (ниже), чтобы центрировать форму.
.container{
position relative;
}
.form{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Bootstrap 4 используйте horizontal-centering
HTML:
<!--
mx-auto: Bootstrap class
my-form: Your class
-->
<div class="my-form mx-auto">
<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>
CSS
.my-form{
width: 30%; /* value of your choice */
}
Используйте 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>
Просто используйте центральную метку:
<center>StackOverflow centered</center>
я пробую это его работа
<div class="container">
<div class="row justify-content-center">
<div class="form-group col-md-4 col-md-offset-5 align-center ">
<input type="text" name="username" placeholder="Username" >
</div>
</div>
</div> если вы настаиваете на использовании Bootstrap, используйте d-inline-block как показано ниже
<div class="row d-inline-block">
<form class="form-inline">
<div class="form-group d-inline-block">
<input type="email" aria-expanded="false" class="form-control mr-2"
placeholder="Enter your email">
<button type="button" class="btn btn-danger">submit</button>
</div>
</form>
</div>
<div class="col-md-4 offset-md-4">
put your form here
</div>