我如何能中心水平或垂直与推特引导元素?

是否有任何方法在主父元素中垂直或水平地居中html元素?

当前回答

我用这个

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }
</style>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>
</body>

2013-06-19 21:16:38

其他回答

我用这个

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }
</style>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>
</body>

2013-06-19 21:16:38

我发现在Bootstrap 4中你可以这样做:

中心水平确实是文本中心类

中心垂直，但是使用bootstrap类添加mb-auto mt-auto，使margin-top和margin- bottom设置为auto。

2018-11-19 15:19:51

在Bootstrap 4中，定心方法已经改变。

水平中心在引导4

文本中心仍然用于显示:内联元素 Mx-auto将中心块替换为中心显示:flex子 Offset -*或mx-auto可用于网格列居中

Mx-auto (auto x轴边距)将中心显示:块或显示:具有定义宽度的flex元素(%，vw, px等)。默认情况下，在网格列上使用Flexbox，因此也有各种Flexbox居中方法。

示范引导4水平定心

有关BS4的垂直定心，请参阅https://stackoverflow.com/a/41464397

2017-03-20 14:10:59