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

问题描述

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

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 4中有多种水平居中方法 ...

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

  • text-center用于中心display:inline个元素
  • offset-*mx-auto可用于中心列(col-*)
  • row上的justify-content-center中心列(col-*)
  • mx-auto用于将display:block元素居中于d-flex
  • text-center for center display:inline elements
  • offset-* or mx-auto can be used to center column (col-*)
  • or, justify-content-center on the row to center columns (col-*)
  • mx-auto for centering display:block elements inside d-flex

mx-auto(自动x轴边距)将使具有定义宽度(%,vw,px等)的display:blockdisplay:flex元素居中.默认情况下,在网格列上使用Flexbox,因此还有多种flexbox居中方法.

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.

Bootstrap 4居中方法示例

在您的情况下,请使用mx-autocol-3居中,并使用text-center将其内容居中.

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

,在弹性框元素(.row)上使用justify-content-center:

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

另请参阅:
Bootstrap 4中的垂直对齐中心

Also see:
Vertical Align Center in Bootstrap 4

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

08-04 03:46