在 Bootstrap 中将列内的内容居中 [英] Center the content inside a column in Bootstrap

查看：47
本文介绍了在 Bootstrap 中将列内的内容居中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要帮助解决问题，我需要在bootstrap4中将列内的内容居中，请在下面找到我的代码

<div class="row justify-content-center"><div class="col-3"><div class="nauk-info-connections">

解决方案

Bootstrap 5(2021 年更新)

由于 flexbox 仍在使用，Bootstrap 5 中的居中方法以相同的方式工作.列可以使用偏移量、自动边距或 justify-content-center (flexbox) 居中.

Bootstrap 5 居中方法演示

引导程序 4(原始答案)

Bootstrap 4 中有多种水平居中方法...

  • text-center 用于中心 display:inline 元素
  • offset-* 或 mx-auto 可用于列居中 (col-*)
  • 或者，row 上的 justify-content-center 到 center 列 (col-*)
  • mx-auto 用于在 d-flex
    • 中居中 display:block 元素

mx-auto(自动 x 轴边距)将使具有定义宽度的 display:block 或 display:flex 元素居中，(%、vw、px 等).Flexbox 默认用于网格列，因此也有各种 flexbox 居中方法.

Bootstrap 4 居中方法演示

在您的情况下，使用 mx-auto 将 col-3 和 text-center 居中使其内容居中..

<div class="col-3 mx-auto"><div class="text-center">中央

https://codeply.com/go/GRUfnxl3Ol

或者，在 flexbox 元素 (.row) 上使用 justify-content-center:

<div class="row justify-content-center"><div class="col-3 text-center">中央

另见:
Bootstrap 中的垂直对齐中心

I Need help to fix the problem, I need to center the content inside the column in bootstrap4, please find my code below

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3">
        <div class="nauk-info-connections">
        </div>
     </div>
</div>

解决方案

Bootstrap 5 (update 2021)

Since flexbox is still used the centering methods in Bootstrap 5 work the same way. Columns can be centered using offset, auto-margins or justify-content-center (flexbox).

Demo of the Bootstrap 5 Centering Methods

Bootstrap 4 (original answer)

There are multiple horizontal centering methods in Bootstrap 4...

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

Demo of the Bootstrap 4 Centering Methods

In your case, use mx-auto to center the col-3 and text-center to center it's content..

<div class="row">
    <div class="col-3 mx-auto">
        <div class="text-center">
            center
        </div>
    </div>
</div>

https://codeply.com/go/GRUfnxl3Ol

or, using justify-content-center on flexbox elements (.row):

<div class="container">
    <div class="row justify-content-center">
        <div class="col-3 text-center">
            center
        </div>
    </div>
</div>

Also see:
Vertical Align Center in Bootstrap

这篇关于在 Bootstrap 中将列内的内容居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆