如何在引导程序 3 中居中表格
Posted
技术标签:
【中文标题】如何在引导程序 3 中居中表格【英文标题】：How to center form in bootstrap 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>
【问题讨论】：
***.com/questions/18153234/… 【参考方案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" />
</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。该系统不允许删除简短的答案，但它们可以被否决。以上是关于如何在引导程序 3 中居中表格的主要内容，如果未能解决你的问题，请参考以下文章