Question

如何以登录表单为中心？我正在使用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>

Answer 1

在bootstrap中有这样简单的方法。每当我需要在页面中创建div中心时，我将所有列除以3（总自举列= 12，除以3>＆gt;＆gt;> 12/3 = 4）。除以4给我三列。然后我把我的div放在中间栏。所有这些数学都是通过这种方式完成的：

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

col-md-4创建了一列4个bootstrap列。让我们说它是主列。 col-md-offset-4在主列的两侧添加一列（宽度为4个自举列）。

Answer 2

一种简单的方法是添加

.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为中心！

Answer 3

一行中的总列数必须加起来为12.所以你可以做col-md-4 col-md-offset-4。因此，您将列拆分为3组，每组4列。现在你有一个4列的形式，偏移量为6，所以你只需要在表格的右侧有两列。你也可以做col-md-8 col-md-offset-2，它会给你一个8列的形式，左边和右边各有2列，col-md-6 col-md-offset-3（6列形式）每边有3列空间）等等。

Answer 4

使用带有offset-6的居中类，如下面的示例所示。

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

Answer 5

我猜您正在尝试将表单相对于任何容器div的水平和垂直居中放置。

您不必为此使用引导程序。只需使用流行的方法（如下）将表单居中即可。

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

Answer 6

在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>

Answer 7

只需使用中心标记：

<center>StackOverflow centered</center>

Answer 8

我尝试这项工作

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

Answer 9

许多人建议使用 col- 和 col-offset- 类，但它不适合我，它仅针对特定屏幕尺寸将表单居中，但如果您更改它，标记会滑动出来。

我找到了两种对齐表单的方法：

使用自定义 CSS：

<div class=".center">
  <form>

  </form>
</div>

.center {
  margin: 0 auto;
  width: 100%;
}
form {
  margin: 0 auto;
  width: 500px; /*find your value*/
  text-align: center;
}

Original code

或者只是从 bootstrap 4 复制一个 CSS 类“justify-content-center”，它很短：

.justify-content-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

然后使用它：

<div class="container">
    <div class="row">
        <div class="form-inline justify-content-center">
        </div>
    </div>
</div>

Answer 10

将您想要围绕此 div 的任何内容包裹起来。

<div class="position-absolute top-50 start-50 translate-middle"></div>

https://getbootstrap.com/docs/5.0/utilities/position/

Answer 11

如果您坚持使用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>

Answer 12

<div class="col-md-4 offset-md-4"> 
put your form here
</div>

如何在bootstrap 3中居形式

12 个答案: