如何使用 Bootstrap2 将 div 居中？

发布于 2025-01-08 03:00:15 字数 891 浏览 1 评论 0原文

http://twitter.github.com/bootstrap/scaffolding.html

我像所有人一样尝试过组合：

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

或

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

更改跨度和偏移量...

但我无法得到一个在页面上完美居中的简单框:(

我只想要一个居中的 6 列宽框...

edit:

？

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

但盒子太宽了，有什么办法可以用 span7 做到吗

span7 offset2 为左侧提供额外的填充 span7 offset3 为右侧提供额外的填充...

原文

http://twitter.github.com/bootstrap/scaffolding.html

I tried like all combinations:

<div class="row">
  <div class="span7 offset5"> box </div>
</div>

<div class="container">
  <div class="row">
    <div class="span7 offset5"> box </div>
  </div>  
</div>

changed span and offset numbers...

But I cant get a simple box perfectly centered on a page :(

I just want a 6-column-wide box centered...

edit:

did it with

<div class="container">
  <div class="row" id="login-container">
    <div class="span8 offset2">
       box
    </div>
  </div>
</div>

But the box is too wide, is there any way I can do it with span7 ?

span7 offset2 gives extra padding to the left span7 offset3 extra padding to the right...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

临风闻羌笛 2025-01-15 03:00:15

Bootstrap 的跨度向左浮动。使它们居中所需要做的就是覆盖此行为。我通过将其添加到我的样式表中来做到这一点：

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

如果您定义了此类，只需将其添加到跨度中即可。

<div class="span7 center"> box </div>

请注意，此自定义中心类必须在 bootstrap css 之后定义。您可以使用 !important 但不建议这样做。

Bootstrap's spans are floated to the left. All it takes to center them is override this behavior. I do this by adding this to my stylesheet:

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

If you have this class defined, just add it to the span and you're good to go.

<div class="span7 center"> box </div>

Note that this custom center class must be defined after the bootstrap css. You could use !important but that isn't recommended.

回复收藏 0 原文

伏妖词 2025-01-15 03:00:15

除了将 div 本身缩小到您想要的大小之外，还可以像这样减小跨度大小... class="span6 offset3"、class="span4 offset4" 等。 .. div 上像 style="text-align: center" 这样简单的东西可能会产生您正在寻找的效果，

您不能使用带有任何设置偏移量的 span7 并使跨度居中页面（因为总跨度 = 12）

回复收藏 0 原文

暮光沉寂 2025-01-15 03:00:15

Bootstrap3 有您可以使用的 .center-block 类。它在此处定义为

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

文档。

Bootstrap3 has the .center-block class that you can use. It is defined as

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Documentation here.

回复收藏 0 原文

傾旎 2025-01-15 03:00:15

如果您想要完全引导（而不是自动左/右方式），您需要一个适合 12 列的模式，例如 2 个空白、8 个内容、2 个空白。这就是这个设置要做的事情。
它仅涵盖 -md- 变体，我倾向于通过添加 col-xs-12 将其调整为全尺寸

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

If you want to go full-bootstrap (and not the auto left/right way) you need a pattern that will fit within 12 columns e.g. 2 blanks, 8 content, 2 blanks. That's what this setup will do.
It only covers the -md- variants, I tend to snap it to full size for small by adding col-xs-12

<div class="container">
  <div class="col-md-8 col-md-offset-2">
     box
  </div>
</div>

回复收藏 0 原文

千寻… 2025-01-15 03:00:15

听起来您只想居中对齐单个容器。
引导框架可能过于复杂，例如，您可能只有一个具有您自己的样式的独立 div，例如：

<div class="login-container">
  <!-- Your Login Form -->
</div>

和 style:

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

如果您嵌套在引导 .container 中的某处，那么应该可以正常工作分区

Sounds like you just wanted to center align a single container.
The bootstrap framework might be overcomplicating that one example, you could have just had a standalone div with your own styling, something like:

<div class="login-container">
  <!-- Your Login Form -->
</div>

and style:

.login-container {
  margin: 0 auto;
  width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}

That should work fine if you are nested somewhere within a bootstrap .container div.

回复收藏 0 原文

玉环 2025-01-15 03:00:15

添加课程中心内容

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}

add the class centercontents

/** Center the contents of the element **/
.centercontents {
    text-align: center !important;
}

回复收藏 0 原文

此生挚爱伱 2025-01-15 03:00:15

@ZuhaibAli 代码对我来说有点工作，但我稍微改变了它：

我在 css 中创建了一个新类，

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

然后 div 变成

<div class="center col-md-6"></div>

我添加了 col-md-6 作为 div 本身的宽度，在这种情况下意味着 div 是一半大小，bootstrap中有1 -12 col md。

@ZuhaibAli code kind of work for me but I changed it a little bit:

I created a new class in css

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

then the div become

<div class="center col-md-6"></div>

I added col-md-6 for the width of the div itself which in this situation meant the div is half the size, there are 1 -12 col md in bootstrap.

回复收藏 0 原文

薄凉少年不暖心 2025-01-15 03:00:15

请遵循此指南 https://getbootstrap.com/docs/3.3/css/

使用 <代码>.center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Follow this guidance https://getbootstrap.com/docs/3.3/css/

Use .center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

回复收藏 0 原文

孤寂小茶 2025-01-15 03:00:15

将 div 包装在带有类 row 的父 div 中，然后将样式 margin:0 auto; 添加到该 div

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>

wrap the div in a parent div with class row then add style margin:0 auto; to the div

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>

回复收藏 0 原文

~没有更多了~

关于作者

慈悲佛祖

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

如何使用 Bootstrap2 将 div 居中？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

关于作者

相关话题

热门标签

推荐作者

紫罗兰の梦幻

-2134

liuxuanli

意中人

○愚か者の日

xxhui

友情链接

如何使用 Bootstrap2 将 div 居中？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（9）

关于作者

相关话题

热门标签

推荐作者

紫罗兰の梦幻

-2134

liuxuanli

意中人

○愚か者の日

xxhui

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。