你如何得到中心内容使用Twitter引导?

小开

类.show-grid在链接中的示例中应用居中对齐的文本。

你总是可以添加style="text-align:center"到你的行div或其他类，我认为。

小开

最佳答案

这是文本居中(问题是关于什么的)

对于其他类型的内容，请参见Flavien的回答。

更新:引导2.3.0+答案

最初的答案是bootstrap的早期版本。从引导2.3.0开始，您可以简单地给div类.text-center. #

原始答案(2.3.0之前)

您需要定义两个类中的一个，row或span12 + text-align: center。参见http://jsfiddle.net/xKSUH/或http://jsfiddle.net/xKSUH/1/

小开

最好的方法是定义一个css样式:

.centered-text {
text-align:center
}

然后在你需要居中文本的地方，像这样添加它:

<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>

或者如果你只想让p标签居中:

<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>

你使用的内联css越少越好。

小开

如果你使用Bootstrap 2.0+

这可以使div居中于页面。

<div class="row">
<div class="span4 offset4">
//your content here gets centered of the page
</div>
</div>

小开

任何文本对齐实用程序类都可以做到这一点。Bootstrap很长一段时间以来一直使用.text-center类来居中文本。

.text-center { text-align: center !important; }

或者您可以创建自己的实用程序。这些年来我看到的一些变化:

.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }

小开

注意:这是在引导3中删除。

在引导3之前，你可以像这样使用CSS类pagination-centered:

<div class="span12 pagination-centered">
Centered content.
</div>

类pagination-centered已经在bootstrap.css(或bootstrap.min.css)中，并且只有一个规则:

.pagination-centered{text-align:center;}

对于引导tripwire。，只需使用类text-center

小开

在我这边，我定义了新的CSS样式，易于使用和记忆:

.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;}  /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}

这是个好主意吗? 有什么好的做法吗?< / p >

小开

我最喜欢的在保持响应性(移动兼容性)的同时居中信息块的方法是在您希望居中的内容之前和之后放置两个空的span1 div。

<div class="row-fluid">


<div class="span1">
</div>


<div class="span10">
<div class="hero-unit">
<h1>Reading Resources</h1>
<p>Read here...</p>
</div>
</div><!--/span-->


<div class="span1">
</div>


</div><!--/row-->

小开

你需要调整.span。

例子:

<div class="container-fluid">
<div class="row-fluid">
<div class="span4"></div>
<!--/span-->
<div class="span4" align="center">
<div class="hero-unit" align="center">
<h3>Sign In</h3>
<form>
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i> </span>
<input class="span6" type="text" placeholder="Email address">
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-key"></i> </span>
<input class="span6" type="password" placeholder="Password">
</div>
</form>
</div>
</div>
<!-- /span -->
<div class="span4"></div>
</div>
<!-- /row -->
</div>

小开

我猜这里的大多数人实际上是在寻找将整个div居中的方法，而不仅仅是文本内容(这是微不足道的…)

在HTML中居中的第二种方法(而不是使用text-align:center)是让元素具有固定宽度和自动边距(左和右)。在Bootstrap中，定义自动边距的样式是“容器”类。

<div class="container">
<div class="span12">
"Centered stuff there"
</div>
</div>

看看这里的小提琴:http://jsfiddle.net/D2RLR/7788/

小开

Bootstrap 2.3有一个text-center类。

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

小开

从2013年2月开始，在某些情况下，我在“span”div中添加了一个“centric”类:

<div class="container">
<div class="row">
<div class="span9 centred">
This div will be centred.
</div>
</div>
</div>

和CSS:

[class*="span"].centred {
margin-left: auto;
margin-right: auto;
float: none;
}

这是因为span* div被浮动到左边，而“自动边缘”居中技术仅在div没有浮动的情况下才有效。

演示(在JSFiddle上):http://jsfiddle.net/5RpSh/8/embedded/result/

JSFiddle: # EYZ0

小开

我创建了这个类来保持居中，无论屏幕大小，同时保持响应功能:

.container {
alignment-adjust: central;
}

小开

如果你使用Bootstrap 3，它也有内置的CSS类.text-center。这就是你想要的。

<div class="text-left">
left
</div>


<div class="text-center">
center
</div>


<div class="text-right">
right
</div>

请参阅jsfiddle中的示例。# EYZ0

小开

引导3.1.1有一个.center-block类用于居中div。看到:# EYZ2。

设置一个元素为display: block，通过margin居中。可作为mixin和类使用。

<div class="center-block">...</div>

或者，正如其他人已经说过的，使用.text-center类将文本居中。

小开

对于Bootstrap 3.1.1及以上版本，将内容居中的最佳类是.center-block helper类。

小开

<div class="container">
<div class="col-md-12 centered">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
label
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>

不要主要使用容器流体。

小开

引导5(2021年更新)

Bootstrap 5仍然使用flexbox网格布局，所以定心工作方式相同。

text-center到中心display:inline元素(即:span, img)
mx-auto用于在flex元素内部定心
offset-*或mx-auto可以用于中心列 (.col-)
justify-content-center到中心列 (col-*)在row内

引导4

“集中content"可以意味着许多不同的东西，自最初的帖子以来，Bootstrap定心已经发生了很大的变化。

水平居中

引导3

text-center用于display:inline元素
center-block到display:block元素居中
col-*offset-*到网格列的中心
看到这个答案导航栏居中

Demo Bootstrap 3水平定心

引导4

text-center仍然用于display:inline元素
mx-auto将center-block替换为display:block元素居中
offset-* 或 mx-auto可以用来居中网格列
row中的justify-content-center也可以用来居中col-*

mx-auto(自动x轴边距)将display:block或display:flex元素居中，这些元素有定义宽度， (%， vw， px，等等。)默认使用Flexbox在网格列上，所以也有各种flexbox定心方法。

Demo Bootstrap 4水平定心

* * * *垂直中心 --

现在引导4是默认为Flexbox，有许多不同的方法来垂直对齐:auto-margins， flexbox跑龙套，或显示跑龙套和垂直对齐utils。首先“垂直对齐”;看起来很明显，但这些只有与内联和表格显示元素一起工作。这里有一些Bootstrap 4垂直定心选项。

1 -垂直中心使用自动边距:

另一种垂直居中的方法是使用my-auto。这将使元素在容器中居中。例如，h-100使行全高，而my-auto将使col-sm-12列垂直居中。

<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>

垂直中心使用自动边距Demo

my-auto表示垂直y轴上的边距，等价于:

margin-top: auto;
margin-bottom: auto;

2 -垂直中心与Flexbox:

因为Bootstrap 4 .row现在是display:flex，你可以简单地使用align-self-center在任何列上垂直居中…

       <div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>

或者，使用align-items-center在整个.row垂直中心对齐所有col-*在行…

       <div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>

垂直中心不同高度列Demo

3 -垂直中心使用显示Utils:

Bootstrap 4有显示跑龙套，可以用于display:table， display:table-cell， display:inline等。这些可以与垂直对齐utils一起使用来对齐内联，内联块或表格单元格元素。

<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>

垂直中心使用显示Utils Demo

小开

中心块也是一个选项没有提到以上的答案

    <div class="center-block" style="width:200px;background-color:#ccc;">...</div>

类center-block所做的就是告诉元素的边距为0 auto, auto是左/右边距。但是，除非类text-center或css text-align:center;在父元素上设置时，元素不知道从哪个点进行自动计算，因此它不会像预期的那样居中。

所以文本中心是一个更好的选择。

小开

您可以使用以下类型中的任何一种

使用Bootstrap现有类text-center。
添加自定义样式style = "text-align:center"。
使用列偏移量:

例如:# EYZ0 < / p >

小开

只需为你想要的div或标签使用一个类，text-center。我认为它可能会很好。它是一个用于文本对齐中心的引导类。

下面是一些文本对齐引导类:

text-left, text-right, text-justify, etc.
<div class="row">
<div class="col-md-12 text-center">
<h1>Bootstrap starter template</h1>
<p>Example text.</p>
</div>
</div>

小开

我尝试了两种方法，它的工作很好，以中心的div。这两种方法都将对齐div在所有屏幕上。

方法1:使用Push:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px">
<h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
</div>

方法2:使用偏移量:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
<h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>

结果:

解释

Bootstrap将指定左边，指定屏幕占用的第一列。如果我们使用offset或push，它会将“this”列移动“that”列。虽然我遇到了一些问题，在响应补偿，推动是了不起的。

小开

2018年更新:

在引导4.1.3中，内容可以使用类mx-auto居中。

<div class="mx-auto">
Centered element
</div>

参考:# EYZ0

小开

添加答案。希望它能帮助到别人

<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class='d-flex flex-row justify-content-center'>
<img
className='img-fluid'
src="<url>"
/>
</div>
</div>
</div>