2012-06-22 25 views
51

Es mi primera experiencia en Twitter Bootstrap. He agregado algunos títulos (h1, h2, etc.) y están alineados por el lado izquierdo. ¿Cuál es la forma correcta de centrar los encabezados?Bootstrap center heading

+0

¿Cómo contiene los encabezados? ¿Dentro de un contenedor, como una etiqueta 'p', o suelto? –

+0

@AndresIlich, dentro del fila-fluide (que está dentro del contenedor-fluide) – SiberianGuy

+0

¿Está buscando centrar todos los encabezados? o solo unos pocos? –

Respuesta

94
.text-left { 
    text-align: left; 
} 

.text-right { 
    text-align: right; 
} 

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

de arranque ha agregado tres clases de CSS para alineación de texto.

11

por sus comentarios, para centrar todos los epígrafes todo lo que tiene que hacer es añadir text-align:center a todos ellos al mismo tiempo, así:

CSS

h1, h2, h3, h4, h5, h6 { 
     text-align: center; 
    } 
+0

Si bien es cierto, la idea detrás del uso de twitter bootstrap es utilizar las clases existentes en la medida de lo posible. Vea la respuesta de Jinpu Hu – Skurpi

+0

@Skurpi Frameworks funcionan como sugerencias para lo que puede usar en un proyecto; De ninguna manera son dados. Si bien es más sencillo usar las clases y estilos ya dados en la rutina de arranque, si los requisitos de su proyecto "requieren" que realice algunos cambios drásticos en el marco, según la pregunta de OP, la forma más sencilla de hacerlo es simplemente modificar esos cambios en el nivel de raíz. A diferencia de agregar una tonelada de clases que realmente no necesita. –

+0

@Skurpi Además, esas clases de alineación [no existían] (https://github.com/twitter/bootstrap/blob/71669dda63644a7b4162ca63f8b9c88b3586c7e4/docs/assets/css/bootstrap.css) en el momento de la redacción. Esta respuesta tiene un año de antigüedad. –

24

simplemente use class = 'text-center' en el elemento para el encabezado central.

<h2 class="text-center">sample center heading</h2> 

clase de uso = 'text-izquierda' en el elemento para el revestimiento izquierdo, y el uso class = 'text-derecho' en el elemento de cabecera de la derecha.

4

Bootstrap viene con muchas clases de preconstrucción y una de ellas es class="text-left". Por favor llame a esta clase cuando sea necesario. :-)