Bootstrap 4行未与中间对齐[重复]

Posted 2023-03-05

【中文标题】Bootstrap 4行未与中间对齐[重复]

【英文标题】：Bootstrap 4 row does not align to middle [duplicate]

【发布时间】：2017-02-08 01:26:44

【问题描述】：

我试图让<div class="col-md-2 col-lg-2"> 中的 content 与中间对齐，但无济于事。 我知道将列设置为 2 的大小不会填充 12 列的网格系统的空间，但我希望它无论如何都与中间对齐。

<div class="row">
    <div class="col-lg-12">
        <h1 class="content-header">Header</h1>
        <div class="row">
           <div class="col-md-2 col-lg-2">
               content
           </div>
           <div class="col-md-2 col-lg-2">
             content
           </div>
        </div>
    </div>

【问题讨论】：

也许这对你有帮助.. 设置为该行 div display: block; 和 margin: 0 auto;

试过了，还是不行@LiborZahrádka

我不确定您的问题是什么，但我认为 text-align:center; 会将您的文本设置在 div 的中心。

@M.Arendsen 我想让我的内容与中间对齐，是的 text-xs-center 只会将文本设置为中间，但即使使用 align: middle 也不会在页面中获得我的内容中心嗯

@Programmer 你是想让文本居中，还是让 div 居中？

【参考方案1】：

找到了一个有效的 CSS 技巧

.row-centered 
    text-align: center;


.col-centered 
    display: inline-block;
    float: none;
    /* reset the text-align */
    text-align: left;
    /* inline-block space fix */
    margin-right: -4px;

【参考方案2】：

Bootstrap 4 与 Bootstrap 3 一样，使用 offset 移动或居中整个列。因此，在您的情况下，请使用 offset-*-4 将其移动到 12 列网格中的 4 列。

<div class="row">
        <div class="col-lg-12 text-xs-center">
            <h1 class="content-header">Header</h1>
            <div class="row">
                <div class="col-md-2 col-lg-2 offset-md-4 offset-lg-4">
                    content
                </div>
                <div class="col-md-2 col-lg-2">
                    content
                </div>
            </div>
        </div>
    </div>

要将内联元素（如文本）居中，请使用： text-center（这是 3.x 中的 text-center）

要居中块元素（如 DIV）或列，请使用： mx-auto（这是 3.x 中的 center-block）

演示：http://www.codeply.com/go/Wxzbd3a6og

Bootstrap 4 中还有新的responsive alignment classes，因此您可以在不同的断点处进行不同的对齐。

【讨论】：

这不适合我，我有动态内容，这意味着有未知的 内容

那么你可以在列上使用mx-auto