使一组Bootstrap DIVs居中

可以通过以下方法实现：

使用Bootstrap的Grid系统：Bootstrap提供了一个强大的网格系统，可以将页面划分为12个等宽的列。要使一组DIVs居中，可以将它们包装在一个父级DIV中，并使用Bootstrap的列类将其划分为一行。然后，使用mx-auto类将该父级DIV居中对齐。

<div class="container">
  <div class="row">
    <div class="col-md-4 mx-auto">
      <!-- 第一个DIV内容 -->
    </div>
    <div class="col-md-4 mx-auto">
      <!-- 第二个DIV内容 -->
    </div>
    <div class="col-md-4 mx-auto">
      <!-- 第三个DIV内容 -->
    </div>
  </div>
</div>

在上面的示例中，col-md-4类将每个DIV划分为等宽的4列，并使用mx-auto类将它们居中对齐。根据需要调整列类的数量和宽度。

使用CSS Flexbox布局：Flexbox是一种强大的CSS布局模型，可以轻松实现元素的居中对齐。要使一组DIVs居中，可以将它们包装在一个父级DIV中，并使用以下CSS样式将其居中对齐。

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

<div class="container">
  <div>
    <!-- 第一个DIV内容 -->
  </div>
  <div>
    <!-- 第二个DIV内容 -->
  </div>
  <div>
    <!-- 第三个DIV内容 -->
  </div>
</div>

在上面的示例中，.container类使用display: flex将其子元素设置为Flex容器，并使用justify-content: center和align-items: center将子元素水平和垂直居中对齐。

这两种方法都可以使一组Bootstrap DIVs居中对齐。具体选择哪种方法取决于您的项目需求和个人偏好。

页面内容是否对你有帮助？

有帮助

没帮助

使一组Bootstrap DIVs居中

html、twitter-bootstrap、center

如何使一组DIVs在容器类中居中，而不是每行居中？在下面的示例中，可以看到灰色div右侧区域的边距，这使得组不会显示在容器的中心。使用justify-content-center也会将最后一个不成对的行居中，这是我不想要的。这个想法是要有一个负责的div小组。敬请参考： <p>centering divs</p> <di

浏览 14提问于2020-05-25得票数 2

2回答

CSS居中对齐DIV使文本保持左对齐？

html、css、alignment

--------------- here herePS:无法使用固定宽度的DIVs，因为它是一个流体内容网站(使用Bootstrap)。有什么想法吗？

浏览 2提问于2020-08-31得票数 0

1回答

Bootstrap:使一组列居中

twitter-bootstrap-3

我有这个： <div class="col-sm-8">...</div>

浏览 0提问于2014-04-29得票数 0

2回答

如何在bootstrap列中居中带背景的DIV？

twitter-bootstrap、twitter-bootstrap-3

我使用的是bootstrap3，并且有包含背景图像的DIVs。这些DIVs放在列中，我想将它们居中。"> </div> 我的每个DIVsbackground-size: contain;

浏览 1提问于2015-09-06得票数 0

1回答

如何使div的文本垂直居中，而不管文本有多少行

css

在下面的演示中，第一个div似乎垂直居中，但第二个不是。.divs { font-size: 18px; display: inline-block98.5px; vertical-align: middle; l

浏览 0提问于2015-10-17得票数 0

5回答

将主div居中

css

我有一个div，里面是另一个divs.My div：<div id="Table_01"></div> 我如何使它居中，以便所有其他div都居中？

浏览 0提问于2010-11-05得票数 0

回答已采纳

1回答

父引导行中的居中div

html、css、bootstrap-4

在下面的示例中，我试图用一个.centered类将包含数字的div居中，但它没有居中。我如何使它们居中，使它们坐在行的中间而不是左边？CSS： margin: 0 auto;DIVs： <div id="83" class="square centerd">83

浏览 3提问于2018-03-07得票数 2

7回答

使Bootstrap中的内容在列中居中

twitter-bootstrap、bootstrap-4、flexbox、bootstrap-5

我需要帮助来解决这个问题，我需要居中的内容在bootstrap4中的列，请找到我的代码如下 <div class="row justify-content-center

浏览 2提问于2017-03-01得票数 108

1回答

如何在Twitter Bootstrap中将两个跨度居中？

css、twitter-bootstrap

我在让两个span6 div在Bootstrap中居中时遇到了问题。我在一个容器中的一行中有这两个divs fluid，但是所有的东西都放在左边。如果可能的话，我希望两个div彼此相邻并居中显示，但如果屏幕太小，我希望第二个跨度位于第一个跨度的下方。任何帮助都将不胜感激。

浏览 0提问于2013-03-17得票数 0

1回答

自定义桌面上的引导列排列

css、html、twitter-bootstrap、twitter-bootstrap-3

使用Bootstrap v3.1.1 左边正确的左边 <div class="row clearfix"> <div class="col-md

浏览 1提问于2014-03-30得票数 1

4回答

如何通过DOM使div align=“居中”？

dom、html

我有一个HTML代码：我希望使用javascript (document.findElementById)来更改div的行为，使其如下所示：我该怎么做呢？

浏览 0提问于2012-02-29得票数 2

回答已采纳

1回答

在bootstrap中堆叠时Divs不居中

twitter-bootstrap

我正在用Bootstrap组织一个测试站点，我想我在某个地方误解了网格系统。我有以下代码：<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet

浏览 0提问于2017-09-21得票数 1

3回答

单个IMG在DIV中居中多次，外部DIV向右对齐

css、html

这基本上使DIVs出现在正确的位置，但IMG不是中心。我正在尝试使绿色共享图标在外部红色框(DIVs)中以垂直和水平的方式显示居中。

浏览 1提问于2014-02-27得票数 0

回答已采纳

3回答

Bootstrap使Div居中

html、css、twitter-bootstrap

<li>ordinary</li> </div>我的目标是: 1:在页面中间定位container。2:水平对齐下拉菜单。

浏览 4提问于2016-08-23得票数 0

2回答

使Bootstrap Carousel居中

html、css、twitter-bootstrap

我在我的主页上创建了一个Bootstrap Carousel，在一些文本信息之后。我不想在我的页面中有一个大的旋转木马，所以我使用<div class="col-sm-6">减小了它的大小。但我的旋转木马位于页面的左侧，我无法将其居中。我想把它放在我页面的中央。

浏览 0提问于2016-09-16得票数 1

回答已采纳

2回答

我一直在使用bootstrap，现在我正在创建的东西在居中时遇到了一些问题，第一个问题是无法垂直居中右侧导航栏项目，它只是在导航栏的中心线上方，第二个问题是一个包含不同类的div形式的日志，我一直试图使它水平居中9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https:&#

浏览 17提问于2018-08-05得票数 0

回答已采纳

1回答

使用Bootstrap使内容居中

php、javascript、twitter-bootstrap、alignment

<li>Stuff</li> </div>不幸的是，text-center下的文本没有居中

浏览 1提问于2013-05-24得票数 0

2回答

如何使Bootstrap窗体居中

css、twitter-bootstrap

我需要将每一行分别居中吗？还有另一个问题，例如，"Supllier Account“字段，与上面两个字段的长度相同，如何操作？

浏览 4提问于2017-03-07得票数 0

1回答

如何使bootstrap对象居中？

html、css、bootstrap-4

浏览 17提问于2021-05-02得票数 0

回答已采纳

0回答

使用bootstrap使图像居中

html、css、twitter-bootstrap、twitter-bootstrap-3

我尝试使用boostrap的fluid-container、img-responsive和center-block (以及margin: 0 auto; CSS)来居中显示图像，但到目前为止还没有成功。e59867bb14c1.jpeg" alt="Jorge Paulo Lemann" class="img-responsive center-block"></div> 但它不会使图像居中

浏览 0提问于2017-06-14得票数 1

回答已采纳

点击加载更多