logo标签列表

如何在Bootstrap 3中居中表单

htmlcsstwitter-bootstraptwitter-bootstrap-3
66

我该如何将登录表单居中显示？我使用了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>
4
使用Bootstrap 3标记或CSS来居中一个div在父容器中添加text-center类并将其包含的div包裹在一个带有d-inline-block类的元素中，如下所示：
要居中的内容
您还可以使用CSS来实现此操作，只需设置包含div的父容器的text-align属性为center：
要居中的内容
 - NoobEditor
10个回答
223

在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表示Bootstrap四栏中的一栏，它的宽度为四分之一。假设这是主列。col-md-offset-4 在主列两侧（每侧一栏，宽度均为四分之一）添加一栏。

7
这显然是正确答案，甚至是以“引导式”方式完成的。 - Yan Paulo
我同意你的看法，@Donato。年份差距可能会防止它被标记！ - NoobEditor
当需要对齐的元素长度超过居中 <div class="col-md-4 col-md-offset-4"> 的实际宽度时，居中功能将无法正常工作。但是我只需要减小偏移量即可解决问题，谢谢。 - WesternGun
请注意，在您正在处理的div上方和下方各添加一个div。 - Luigi Lopez
1
这个解决方案并不是很好，因为它会使您的 div 占据 4 列，这在某些屏幕尺寸下看起来不太好。当您有一个大部分为空的页面，并且有一个位于正中心的表单时，最好将 div 的宽度设置为固定值。 - Calicoder
显示剩余2条评论
62
把简单的方法是添加 < / p > 标签。
.center_div{
    margin: 0 auto;
    width:80% /* value of your choice which suits your alignment */
}

对于你的类 .container，添加 width:xx % 属性即可获得完美居中的div！

例如：

<div class="container center_div">

但我感觉在BS中，默认情况下container是居中的！

8
每行的总列数必须达到12。因此，您可以使用col-md-4 col-md-offset-4。这样，您就将列分成了3组，每组4个列。现在，您有一个四列表单，带有6列的偏移量，因此您只能在表单右侧获得2列。您也可以使用col-md-8 col-md-offset-2，这将为您提供一个8列表单，左右各有2列空间，或者使用col-md-6 col-md-offset-3（6列表单，两侧各有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>

5

我猜你想要将表单水平和垂直居中在任何容器div中。

你不必使用bootstrap来实现。只需使用以下流行的方法即可居中表单。

.container{
 position relative;
}
.form{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}
成功解决了问题，无需在form前加上"." （因此： form { // etct}）。 - Tichel
4
使用类似下面示例的居中类(centered class)和偏移量6(offset-6)。
<body class="container">
<div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
</div>

6
这个 centered 类是从哪里来的？我的 Bootstrap 3 副本中没有包含这样的类。 - Nico Haase
1
这对我有效。 - Jatin Gera
0
许多人建议使用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;
}

原始代码

或者直接从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>
-1

如果你坚持使用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>
-3
<div class="col-md-4 offset-md-4"> 
put your form here
</div>
1
提供的答案因质量低被标记为待审核。以下是如何撰写好的答案？的一些指南。该答案可能是正确的，但可以从解释中受益。 - Trenton McKinney
@Rob 虽然它被标记为低质量，但低质量是为需要立即关注的问题保留的答案，根据版主的指示。仅留下代码的答案是不受欢迎的，因此有了评论。但是，根据我拒绝低质量标志的经验，即使是错误的或低质量的答案也不会被删除。此外，它不会因为太短而被删除，并且不属于其他标志，因此被标记为可以接受。系统不允许删除简短的答案，但可以对其进行投票。 - Trenton McKinney
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接