Pregunta ¿Cómo se obtiene contenido centrado usando Twitter Bootstrap?


Estoy tratando de seguir un ejemplo muy básico. Utilizando el página de inicio y el sistema de cuadrícula, Esperaba lo siguiente:

<div class="row">
  <div class="span12">
    <h1>Bootstrap starter template</h1>
    <p>Example text.</p>
  </div>
</div>

... produciría texto centrado

Sin embargo, todavía aparece en el extremo izquierdo. ¿Qué estoy haciendo mal?


518
2018-02-07 21:21


origen


Respuestas:


Esto es para centrar texto (que es de lo que se trataba la pregunta)

Para otros tipos de contenido, consulte La respuesta de Flavien.

Actualización: Bootstrap 2.3.0+ respuesta

La respuesta original fue para una versión anterior de bootstrap. A partir de bootstrap 2.3.0, simplemente puedes darle al div la clase .text-center.


Respuesta original (pre 2.3.0)

Necesitas definir una de las dos clases, row o span12 con un text-align: center. Ver http://jsfiddle.net/xKSUH/ o http://jsfiddle.net/xKSUH/1/


649
2018-02-07 21:43



NOTA: esto fue eliminado en Bootstrap 3.


Pre-Bootstrap 3, podrías usar la clase CSS pagination-centered Me gusta esto:

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

Clase pagination-centered ya está en bootstrap.css (o bootstrap.min.css) y tiene la única regla:

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

Con Bootstrap 2.3.0. solo usa la clase text-center


239
2017-07-05 09:42



Creo que la mayoría de las personas aquí están buscando el camino para centrar el conjunto div y no solo el contenido del texto (que es trivial ...).

La segunda forma (en lugar de usar text-align: center) para centrar las cosas en HTML es tener un elemento con un ancho fijo y un margen automático (izquierda y derecha). Con Bootstrap, el estilo que define los márgenes automáticos es la clase "contenedor".

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

Echa un vistazo aquí para ver un violín: http://jsfiddle.net/D2RLR/7788/


147
2017-10-27 10:10



Bootstrap 3.1.1 tiene un .center-block clase para centrar divs. Ver: http://getbootstrap.com/css/#helper-classes-center.

Bloques de contenido central Establecer un elemento para display: block y centro a través margin. Disponible como mixin y clase.

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

O, como otros ya lo han dicho, use el .text-center texto de clase a centro


35
2018-05-22 12:24



La mejor forma de hacerlo es definir un estilo css:

.centered-text {
    text-align:center
}    

Entonces, donde sea que necesites texto centrado, añádelo así:

<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>

o si solo quieres que la etiqueta p esté centrada:

<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>

Cuanto menos css en línea use, mejor.


28
2018-06-10 16:58



Actualización 2018 - Bootstrap 4

El "contenido centrado" puede significar muchas cosas diferentes, y el centrado de Bootstrap ha cambiado mucho desde la publicación original.

Centro horizontal

Bootstrap 3

  • text-center se utiliza para display:inline elementos
  • center-block centrar display:block elementos
  • col-*offset-* centrar columnas de cuadrícula
  • ver esta respuesta centrar la barra de navegación

Demo Bootstrap 3 Centrado horizontal

Bootstrap 4

  • text-center todavía se usa para display:inline elementos
  • mx-auto reemplaza center-block centrar display:block elementos
  • offset-*  o  mx-auto se puede usar para centrar columnas de cuadrícula
  • justify-content-center en row también se puede usar para centrar col-* 

mx-auto (márgenes automáticos del eje x) se centrarán display:block o display:flex elementos que tienen una ancho definido, (%, vw, px, etc.). Flexbox se usa por defecto en columnas de cuadrícula, por lo que también hay varios métodos de centrado de flexbox.

Manifestación Bootstrap 4 Centrado horizontal


Centro vertical

Ahora que Bootstrap 4 es Flexbox por defecto Hay muchos enfoques diferentes para la alineación vertical usando: márgenes automáticos, Flexbox utils, o el mostrar utils junto con vertical alinear utils. Al principio, "vertical alinear utils" parece obvio, pero estos solamente trabajar con elementos de visualización en línea y tabla. Aquí hay algunas opciones de centrado vertical Bootstrap 4 ..


1 - Centro vertical usando márgenes automáticos:

Otra forma de centrar verticalmente es usar my-auto. Esto centrará el elemento dentro de su contenedor. Por ejemplo, h-100 hace que la fila tenga una altura completa, y my-auto se centrará verticalmente el col-sm-12 columna.

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

Centro vertical usando márgenes automáticos Manifestación

my-auto representa los márgenes en el eje y vertical y es equivalente a:

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

2 - Centro vertical con Flexbox:

vertical center grid columns

Desde Bootstrap 4 .row es ahora display:flex puedes simplemente usar align-self-center en cualquier columna para centrarlo verticalmente ...

       <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>

o usar align-items-center en la totalidad .row para alinear verticalmente el centro todos col-* en la fila...

       <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>

Centro Vertical Columnas de Altura Diferentes Manifestación


3 - Centro vertical usando los Utilizadores de pantalla:

Bootstrap 4 tiene mostrar utils que puede usarse para display:table, display:table-cell, display:inline, etc. Se pueden usar con el utiles de alineación vertical para alinear elementos en línea, bloque en línea o celda de tabla.

<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>

Centro vertical usando los Utilizadores de pantalla Manifestación


23
2018-02-27 10:43



A partir de febrero de 2013, en algunos casos, agrego una clase "centrada" al div "span":

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

y a CSS:

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

La razón de esto es porque el span * div's flota hacia la izquierda, y la técnica de centrado de "margen automático" funciona solo si el div no está flotando.

Demostración (en JSFiddle): http://jsfiddle.net/5RpSh/8/embedded/result/

JSFiddle: http://jsfiddle.net/5RpSh/8/


13
2018-02-26 08:34



La clase .show-grid aplica texto centrado en el centro en el ejemplo del enlace.

Siempre puedes agregar style="text-align:center" a su div fila o alguna otra clase que pensaría.


12
2018-02-07 21:37



Si usa Bootstrap 3, también tiene una clase de CSS incorporada llamada .text-center. Eso es lo que quieres.

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

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

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

Por favor vea el ejemplo en jsfiddle. http://jsfiddle.net/ucheng/Q4Fue/


9
2017-10-24 02:26



Bootstrap 2.3 tiene un text-center clase.

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

8
2018-02-14 17:18