Html 如何在引导程序 4 中居中卡片？

How to center cards in bootstrap 4?

提问by Vaibhav Singh

I am using bootstrap 4 alpha 3.
I want to center the card horizontally in the middle across the page.

我正在使用 bootstrap 4 alpha 3。
我想将卡片水平居中放置在页面中间。

Preview / link:http://codepen.io/vaibhavsingh97/full/VjRAXW

Preview / link:http://codepen.io/vaibhavsingh97/full/VjRAXW

I have tried all the different options listed on the bootstrap 4 example page for cards.

我已经尝试了 bootstrap 4 示例页面上列出的所有不同选项卡。

How can I achieve this?

我怎样才能做到这一点？

回答by Shahil M

Add the css for .card

为 .card 添加 css

.card {
        margin: 0 auto; /* Added */
        float: none; /* Added */
        margin-bottom: 10px; /* Added */
}

here is the pen

这是笔

UPDATE:You can use the class .mx-autoavailable in bootstrap 4 to center cards.

更新：您可以使用.mx-autobootstrap 4 中可用的类来居中卡片。

回答by Zim

Update 2018

2018 年更新

There is no need for extra CSS, and there are multiple centeringmethods in Bootstrap 4:

不需要额外的CSS，Bootstrap 4中有多种居中方法：

• text-centerfor center display:inlineelements
• mx-autofor centering display:blockelements inside display:flex(d-flex)
• offset-*or mx-autocan be used to center grid columns
• or justify-content-centeron rowto center grid columns

• text-center对于中心display:inline元素
• mx-auto用于将display:block内部元素居中display:flex（d-flex）
• offset-*或mx-auto可用于使网格列居中
• 或justify-content-center上row至中心格列

mx-auto(auto x-axis margins) will center inside display:flexelements that have a defined width, (%, vw, px, etc..). Flexbox is used by default on grid columns, so there are also various centering methods.

mx-auto（自动 x 轴边距）将在display:flex具有定义宽度（%、vw、px 等）的元素内部居中。Flexbox 默认用于网格列，因此也有各种居中方法。

In your case, you can simply mx-autoto the cards.

在您的情况下，您可以简单地mx-auto转到cards。

回答by bharti parmar

You can also use Bootstrap 4 flex classes

您还可以使用 Bootstrap 4 flex 类

Like: .align-item-center, .justify-content-center

We can use this classes identically for all device view.

我们可以对所有设备视图相同地使用这些类。

Like .align-iten-sm-center, .align-item-md-center, .justify-content-xl-center, .justify-content-lg-center, .justify-content-xs-center

.text-center class is used to align text in center.

.text-center 类用于将文本居中对齐。