html - derecha - ¿Cómo obtener contenido centrado usando Twitter Bootstrap?

centrar contenido columna bootstrap 4

Question

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?

Answer 1

Esto es para Text Centering ( que es de lo que trata la pregunta )

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

Actualización: Bootstrap 2.3.0+ Respuesta

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

Respuesta original (pre 2.3.0)

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

Answer 2

Actualización 2018 - 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 en display:inline
• center-block central a display:block central display:block elementos de display:block
• col-*offset-* para centrar columnas de cuadrícula
• Ver esta respuesta para centrar la barra de navegación.

Demo Bootstrap 3 Centrado horizontal

Bootstrap 4

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

mx-auto (los márgenes del eje x automáticos) centrarán la display:block o display:flex elementos display:flex que tienen un ancho definido , ( % , vw , px , etc.). Flexbox se utiliza de forma predeterminada 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, hay muchos enfoques diferentes para la alineación vertical utilizando: auto-margins , utilidades de flexbox o utilidades de pantalla junto con utils de alineación vertical . Al principio, la "alineación vertical de utilidades" parece obvia, pero solo funcionan con elementos de visualización en línea y de tabla. Aquí hay algunas opciones de centrado vertical de Bootstrap 4.

1 - Centro vertical utilizando 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 su altura completa, y my-auto centrará verticalmente la 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>

Centro vertical usando la demo de Auto Margins

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

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

2 - Centro vertical con Flexbox:

Ya que Bootstrap 4 .row está ahora en display:flex , simplemente puede 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, use align-items-center en toda la .row para .row verticalmente todos los 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 Demostración de diferentes columnas de altura

3 - Centro vertical usando Utilidades de pantalla:

Bootstrap 4 tiene utilidades de visualización que se pueden usar para display:table , display:table-cell , display:inline , etc. Se pueden usar con las utilidades de alineación vertical para alinear elementos de celda en línea, bloque en línea o 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 la demostración de utilidades de pantalla

Answer 3

A partir de febrero de 2013, en algunos casos, agrego una clase "centrada" a la división "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 que el span * div se hace flotar hacia la izquierda y la técnica de centrado del "margen automático" solo funciona si el div no está flotando.

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

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

Answer 4

Bootstrap 2.3 tiene una clase de 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>

Answer 5

Creé esta clase para mantener el centro independientemente del tamaño de la pantalla y al mismo tiempo mantener las funciones de respuesta:

.container {
    alignment-adjust: central;
}

Answer 6

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

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

O puedes crear tus propias utilidades. Algunas variaciones que he visto en los últimos años:

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

Answer 7

El bloque central es también una opción no referida en las respuestas anteriores.

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

Todo lo que hace el center-block clase es decirle al elemento que tenga un margen de 0 automático, el auto es el margen izquierdo / derecho. Sin embargo, a menos que la clase text-center o css text-align: center; está configurado en el elemento primario, el elemento no sabe el punto desde el cual se debe calcular este cálculo automático, por lo que no se centrará como se anticipó.

Así que el centro de texto es una mejor opción.

Answer 8

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

Siempre puedes agregar style="text-align:center" a tu división div o alguna otra clase, creo.

Answer 9

La mejor manera de hacerlo es definir un estilo css:

.centered-text {
    text-align:center
}    

Entonces, donde sea que necesites un texto centrado, lo agregarás 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 en línea css uses mejor.

Answer 10

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

Modo 1: Utilizando 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>

Manera 2: Utilizando 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:

Explicación

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

Answer 11

Mi método preferido para centrar bloques de información mientras se mantiene la capacidad de respuesta (compatibilidad móvil) es colocar dos divs span1 vacíos 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-->

Answer 12

NOTA: esto fue eliminado en Bootstrap 3 .

Antes de Bootstrap 3, puedes usar la clase CSS pagination-centered esta manera:

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

La 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

Answer 13

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

Answer 14

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

Answer 15

Por mi parte, defino nuevos estilos CSS 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?

Answer 16

Puedes usar cualquiera de los siguientes tipos

1. Utilice el text-center existente de la clase Bootstrap.
2. Añadiendo un estilo personalizado, style = "text-align:center" .

3. Utilice un desplazamiento de columna:

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

Answer 17

Si está utilizando Bootstrap 2.0+

Esto puede hacer que el div centrado a la página.

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

Answer 18

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/

Answer 19

Simplemente use una clase, centro de texto, para el div o 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>

Answer 20

Supongo que la mayoría de las personas aquí en realidad están buscando la forma de centrar todo el 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 un violín: http://jsfiddle.net/D2RLR/7788/

Answer 21

Actualización 2018:

En Bootstrap 4.1.3, el contenido puede centrarse utilizando la clase mx-auto .

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

Referencia:

https://getbootstrap.com/docs/4.1/utilities/spacing/#horizontal-centering

Answer 22

Bootstrap 3.1.1 tiene una .center-block para divs de centrado. Consulte: http://getbootstrap.com/css/#helper-classes-center .

Centrar los bloques de contenido Establezca un elemento para display: block y centrar por margin . Disponible como mixin y clase.

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

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

Answer 23

<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 utilice el fluido del recipiente en la tubería principal.