¿Cómo obtienes contenido centrado usando Twitter Bootstrap?

569

Estoy tratando de seguir un ejemplo muy básico. Usando la 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?

Hoa
fuente
55
¿Desea que el texto dentro del '<div class = "span12">' centrado, o desea que todo el '<div class = "row">' div esté centrado en la ventana del navegador?
NerdFury
Actualice el enlace a twitter.github.com/bootstrap/scaffolding.html#gridSystem
Amol M Kulkarni
3
@Chloe personas que se preocupan por la compatibilidad HTML. <center>está en desuso a favor de lo text-align: centercual, por cierto, es exactamente lo que .text-centerenvuelve la clase bootstrap .
jmoss
Si usa Bootstrap 4, consulte: stackoverflow.com/questions/42388989/…
Zim

Respuestas:

690

Esto es para el centrado de texto (de eso se trataba la pregunta )

Para otros tipos de contenido, vea la respuesta de Flavien .

Actualización: Bootstrap 2.3.0+ Respuesta

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


Respuesta original (pre 2.3.0)

Necesita definir una de las dos clases, rowo span12con a text-align: center. Ver http://jsfiddle.net/xKSUH/ o http://jsfiddle.net/xKSUH/1/

ScottS
fuente
2
He intentado esto para ambas filas y span12, pero mi tabla dentro de span12, dentro de la fila siempre se encuentra a la izquierda. Agregar relleno lo mueve al centro, pero quiero centrarlo de manera receptiva. ¿Puedo hacer el relleno automático de alguna manera?
ATSiem
Veo que esto está funcionando, pero ¿por qué tenemos que definir it.Are estos no ya definido estoy hablando sólo sobre el texto ....?
Akshat Jiwan Sharma
@ AkshatJiwanSharma: las clases están definidas, pero la última vez que miré, text-align: centerno está predeterminado en esas clases. Normalmente, el valor predeterminado será la leftalineación.
ScottS
para pre 2.3.0 .pagination-centeredtambién funciona: P le ahorra la pulsación de tecla de agregar otra clase.
Sarim
@Sarim: En realidad, pagination-centeredrequiere que agregue otra clase al html. Mi respuesta anterior a la 2.3.0 solo requiere que uno expanda la definición de propiedad de una clase que ya está allí. Además, si observa los comentarios sobre la respuesta usando pagination-centered, encontrará algunas objeciones y advertencias relacionadas con eso. Pero si funciona para usted en su caso, ¡hágalo! :-)
ScottS
240

NOTA: esto se eliminó en Bootstrap 3 .


Pre-Bootstrap 3, puede usar la clase CSS de pagination-centeredesta manera:

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

La clase pagination-centeredya 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 classtext-center

Iurii.K
fuente
41
No sugeriría usar esto como muy específico para la paginación (como se infiere del nombre de clase). Puede chocar con los estilos que aplica en la paginación y puede no ser compatible con futuras actualizaciones si bootstrap decide que esta clase necesita hacer más para la paginación centrada.
Dayson
44
@ lurii.k Esto hace que TODO esté centrado, incluidos los niños. ¿Qué pasa si solo queremos alinear el contenedor exterior pero tener todo dentro alineado a la izquierda?
gatzkerob
1
Con bootstrap 2.3.0. solo use la clase css .text-center
Iurii.K
¡La mejor respuesta hasta ahora! Trabajar con bootstrap 2.3.2
jQuery00
44
Parece que Bootstrap 3.0.0 ha eliminado esta clase. Usar .text-centeren el padre es la solución correcta para esta versión.
Blazemonger
152

Supongo que la mayoría de la gente aquí está buscando la forma de centrar tododiv y no solo el contenido del texto (lo cual 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>

Eche un vistazo aquí para obtener un violín: http://jsfiddle.net/D2RLR/7788/

Flavien Volken
fuente
99
Esta es la respuesta correcta, como se documenta oficialmente aquí: twitter.github.com/bootstrap/scaffolding.html#layouts
Qlimax
2
@Qlimax Su enlace parece estar roto, creo que esto es lo que quería para 2.3.2: getbootstrap.com/2.3.2/scaffolding.html#layouts
Chris
1
@Sebastialonso Acabo de arreglar la dependencia obsoleta, gracias por informar el problema
Flavien Volken
Esto no funcionará si desea centrar una columna. Para centrar la columna de la cuadrícula, use col-*offset-*. por ejemplo <div class="col-10 offset-1">o<div class="col-8 offset-2">
sgon00
47

Actualización 2019 - Bootstrap 4

"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-blockpara centrar display:blockelementos
  • col-*offset-* para centrar columnas de cuadrícula
  • mira esta respuesta para centrar la barra de navegación

Demo Bootstrap 3 Centrado horizontal

Bootstrap 4

  • text-centertodavía se usa para display:inlineelementos
  • mx-autoreemplaza center-blocka display:blockelementos centrales
  • offset-* o mx-auto puede usarse para centrar columnas de cuadrícula
  • justify-content-centeren rowtambién se puede utilizar para centrarcol-*

mx-auto(márgenes de auto-eje X) se centrarán display:blocko display:flexelementos que tienen una anchura definida , ( %, vw, px, etc ..). Flexbox se usa por defecto en las columnas de la cuadrícula, por lo que también hay varios métodos de centrado de flexbox.

Demo Bootstrap 4 Centrado horizontal


Centro vertical

Ahora que Bootstrap 4 es flexbox por defecto, existen muchos enfoques diferentes para la alineación vertical: márgenes automáticos , utilidades de flexbox o utilidades de visualización junto con utilidades de alineación vertical . Al principio, "utilidades de alineación vertical" parece obvio, pero solo funcionan con elementos de visualización en línea y de 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-100hace que la fila tenga toda la altura y my-autocentrará verticalmente la col-sm-12columna.

<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 con demostración de márgenes automáticos

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

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

2 - Centro vertical con Flexbox:

columnas de la cuadrícula central vertical

Dado que Bootstrap 4 .rowes ahora display:flex, simplemente puede usarlo align-self-centeren 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, use align-items-centeren su totalidad .rowpara alinear verticalmente en el centro todo 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>

Demostración de columnas de altura vertical de centro vertical


3 - Centro vertical usando las utilidades de pantalla:

Bootstrap 4 tiene utils de visualización que se pueden utilizar para display:table, display:table-cell, display:inline, etc .. Estos pueden ser usados con los utils de alineación vertical a inline align, elementos de celda de tabla inline-block o.

<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 con demostración de utilidades de pantalla

Zim
fuente
Al usar el diseño de cuadrícula, descubrí que solo la siguiente combinación de css alinearía horizontal y verticalmente un div dentro de una columna para que la altura máxima de la columna también coincidiera con la columna más grande en la misma fila. .className-of-inner-div { display: inline-block; text-align: left; padding-top: 25%; padding-bottom: 20%; margin-top: auto; margin-bottom: auto; } .className-of-Grid-column { vertical-align:middle; text-align: center; }
user3188040
Muchas gracias. Esto resuelve mi problema.
sgon00
Votaría por cada demo si pudiera. Son grandiosos. :) ¡Muchas gracias!
Pascal
36

Bootstrap 3.1.1 tiene una .center-blockclase para centrar divs. Ver: http://getbootstrap.com/css/#helper-classes-center .

Centrar bloques de contenido Establecer un elemento en display: blocky centrar mediante margin. Disponible como mixin y clase.

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

O, como ya han dicho otros, use la .text-centerclase para centrar el texto.

Cornishninja
fuente
29

La mejor manera de hacer esto es definir un estilo CSS:

.centered-text {
    text-align:center
}    

Luego, donde sea que necesite texto centrado, lo agrega 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 centrar la etiqueta 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>

Cuanto menos css en línea use, mejor.

tomwolber
fuente
Buena, usé esto para centrar los botones en un pie de página modal Bootstrap.
Elk gigante
13

La clase .show-grid está aplicando texto alineado al centro en el ejemplo en el enlace.

Siempre puede agregar style="text-align:center"a su fila div o alguna otra clase, creo.

PAULDAWG
fuente
44
agregar estilos en línea como este a menudo se considera una mala práctica
Spencer Williams
2
Estoy de acuerdo, y es por eso que también dije "o alguna otra clase" :)
PAULDAWG
12

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 los span * div se flotan hacia la izquierda, y la técnica de centrado de "margen automático" funciona solo si el div no se flota.

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

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

bjfletcher
fuente
3
Esta es la mejor respuesta porque el div está centrado y sigue respondiendo. Aquí hay un violín para la demostración. El de la respuesta no funciona: jsfiddle.net/r7Qgn/6
Rafi
9

Si usa Bootstrap 3, también tiene una clase 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/

Stanley Wang
fuente
8

Bootstrap 2.3 tiene una text-centerclase.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
leonbloy
fuente
No, eso es solo para texto, la pregunta es sobre el contenedor principal
drmartin
"la pregunta es sobre el contenedor principal" No entiendo por qué afirmas eso (y veo la respuesta aceptada)
leonbloy
5

Por mi parte, defino nuevos CSSestilos listos para usar y fáciles de recordar:

.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;}

¿Es una buena idea? ¿Hay alguna buena práctica para esto?

Parisiam
fuente
3
pendiente resbaladiza. Se supone que css elimina las preocupaciones de estilo de la estructura del documento. Estos, aunque indirectamente, los agregan de nuevo. Tal vez TBS da un mal ejemplo con sus span12
mensajes de texto
Estoy de acuerdo con el comentario de la pendiente resbaladiza. También agregaría que el uso de Twitter Bootstrap en sí es posiblemente una pendiente resbaladiza.
Jason Swett el
4

Si está utilizando Bootstrap 2.0+

Esto puede hacer que el div se centre en la página.

<div class="row">
    <div class="span4 offset4">
        //your content here gets centered of the page
    </div>
</div>
Sandeep
fuente
11
Esto no centra el elemento. coloca la esquina superior izquierda del elemento a 4 columnas hacia adelante. centrar significa poner el centro exacto del elemento en el centro del elemento contenedor.
Cagatay Kalan
3

Cualquier clase de utilidad de alineación de texto haría el truco. Bootstrap ha estado usando la .text-centerclase para centrar texto durante mucho tiempo.

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

O puede crear sus propias utilidades. Algunas variaciones que he visto a lo largo de los años:

.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }
nathanjessen
fuente
3
No es un buen diseño, ya que los elementos pull-left y pull-right afectan el elemento dado a la clase. pull-center como usted define, afecta a los elementos secundarios del elemento.
Cagatay Kalan
3

Necesita ajustar con el .span.

Ejemplo:

<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>
Praveen Das - PD
fuente
2

Mi método preferido para centrar bloques de información mientras se mantiene la capacidad de respuesta (compatibilidad móvil) es colocar dos span1divisiones vacías antes y después del contenido que desea centrar.

<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-->
Kilizo
fuente
2

Para Bootstrap versión 3.1.1 y superior, la mejor clase para centrar el contenido es la .center-blockclase auxiliar.

Shwan Namiq
fuente
sí, ahora es muy temático y los usuarios usan versiones de arranque superiores a 3.1.1
SAFEEN 1990
1
<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>

No use líquido contenedor en la tubería principal.

Talha
fuente
Tienes una centeredclase en tu código que creará mucha confusión
bg17aw
enfoque interesante, pero para mi css de formulario web particular, esta fue una buena opción.
JoshYates1980
1

El bloqueo central también es una opción que no se menciona en las respuestas anteriores

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

Toda la clase center-block es decirle al elemento que tenga un margen de 0 automático, siendo el automático los márgenes izquierdo / derecho. Sin embargo, a menos que la clase text-center o css text-align: center; se establece en el elemento primario, el elemento no conoce el punto desde el que se puede calcular este cálculo automático, por lo que no se centrará como se esperaba.

Entonces text-center es una mejor opción.

Mamba negro
fuente
1

Puedes usar cualquiera de los siguientes tipos

  1. Use la clase existente Bootstrap text-center.
  2. Adición de un estilo personalizado, style = "text-align:center".
  3. Use un desplazamiento de columna:

    Ejemplo: <div class="col-md-offset-6 col-md-12"></div>

Poorna Rao
fuente
0

Creé esta clase para mantener el centrado independientemente del tamaño de la pantalla y al mismo tiempo mantener características receptivas:

.container {
    alignment-adjust: central;
}
Ariel
fuente
0

Simplemente use una clase, centro de texto, para el div o la etiqueta que desee. Creo que puede funcionar bien. Es una clase Bootstrap para el centro de alineación de texto.

Aquí hay algunas clases de Bootstrap de alineación de texto:

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>
shiva krishna
fuente
0

Lo intenté de dos maneras, y funcionó bien para centrar el div. Ambas formas alinearán los divs en todas las pantallas.

Forma 1: Usando 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>

Camino 2: Usando Offset:

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

Resultado:

Ingrese la descripción de la imagen aquí

Explicación

Bootstrap designará a la izquierda, la primera columna de la ocupación de pantalla especificada. Si usamos offset o push, cambiará la columna 'this' por 'esas' muchas columnas. Aunque enfrenté algunos problemas en la capacidad de respuesta de la compensación, el impulso fue increíble.

Pikesh Prasoon
fuente