如何在引导程序 3 中居中表格答案

【问题标题】：How to center form in bootstrap 3如何在引导程序 3 中居中表格
【发布时间】：2014-01-18 03:17:24
【问题描述】：

如何使我的登录表单居中？我正在使用引导列，但它不起作用。

这是我的代码：

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

【问题讨论】：

stackoverflow.com/questions/18153234/…

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

在 Bootstrap 中有一种简单的方法可以做到这一点。每当我需要在页面中创建div 中心时，我将所有列除以 3（总 Bootstrap 列 = 12，除以 3 >>> 12/3 = 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 Bootstrap 列）。

【讨论】：

这显然是正确的答案，甚至是以“引导式”的方式完成的。
同意你的观点@Donato，可能会阻止它被标记！
当要对齐的元素的宽度大于居中<div class="col-md-4 col-md-offset-4">的实际宽度时不起作用。但我只是减少了偏移量，它就可以了，谢谢。
请注意，您必须在上面添加一个 div，在您正在处理的 deiv 之后添加一个
这个解决方案不是很好，因为它会让你的 div 占据 4 列，这在某些屏幕尺寸下看起来不太好。当您的页面大部分为空时，中间的表单居中时，最好为 div 设置宽度。

【解决方案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 为中心！

【讨论】：

【解决方案3】：

一行中的总列数必须加起来为 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 列空间）等。

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

让它在没有 .在表单之前（所以：form { // etct}

【解决方案5】：

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

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

【讨论】：

这个centered 类从何而来？我的 Bootstrap 3 副本不包含这样的类

【解决方案6】：

我试过了，效果很好

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

【讨论】：

【解决方案7】：

围绕这个 div 包裹你想要围绕的任何内容。

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

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

【讨论】：

【解决方案8】：

很多人建议使用 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>

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

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

【讨论】：

所提供的答案被标记为低质量帖子以供审核。以下是How do I write a good answer? 的一些指南。这个提供的答案可能是正确的，但它可以从解释中受益。
@Rob 虽然它被标记为低质量，但根据版主的指示，低质量保留用于需要立即关注的问题的答案。只留下代码答案是不受欢迎的，因此是评论。但是，根据我对拒绝的低质量标志的经验，这不会因为质量低，甚至是错误的而被删除。此外，它不会因为太短而被删除，也不属于其他标志，所以它被标记为 ok。该系统不允许删除简短的答案，但它们可以被否决。