Clase de alineación de texto para dentro de una tabla


724

¿Hay un conjunto de clases en el marco Bootstrap de Twitter que alinea el texto?

Por ejemplo, tengo algunas tablas con $totales que quiero alinear a la derecha ...

<th class="align-right">Total</th>

y

<td class="align-right">$1,000,000.00</td>

Respuestas:


1412

Bootstrap 3

v3 Documentos de alineación de texto

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Ejemplo de alineación de texto de Bootstrap 3

Bootstrap 4

v4 Documentos de alineación de texto

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

Ejemplo de alineación de texto de Bootstrap 4


29
Desafortunadamente, esto no funciona para las celdas de la tabla. Puede ser simplemente un problema de pedido de CSS. Consulte este número [ github.com/twitter/bootstrap/issues/6837] . Debería arreglarse en la versión 3.0.
David

26
Atm hago <td> <div class = 'text-center'> bootin </div> </td> para solucionar esto.
Michael J. Calkins

3
Desearía que bootstrap usara los puntos de interrupción con esta clase como: text-right-md para alinear el texto a la derecha solo para medium up.
Eric Bishard

2
<p class = "text-left"> Texto alineado a la izquierda. </p> <p class = "text-center"> Texto alineado al centro. </p> <p class = "text-right"> Texto alineado a la derecha. </p> <p class = "text-justify"> Texto justificado. </p> <p class = "text-nowrap"> Sin texto de
ajuste

1
Es extraño que intenté usar text-md-right (y xs & lg) pero no funcionaron. Estaba en Codepen, así que eso puede tener algo que ver con eso. De todos modos, esta respuesta funcionó para mí. ¡Gracias!
Edson

76

Usar Bootstrap 3.x usando text-rightfunciona perfectamente:

<td class="text-right">
  text aligned
</td>

También puede aplicar esto a toda la fila, también: <tr class = "text-right"> <td> texto alineado </td> </tr>
Glade Mellor

46

No, Bootstrap no tiene una clase para eso, pero este tipo de clase se considera una clase de "utilidad", similar a la clase ".pull-right" que mencionó @anton.

Si observa utilidades, a menos que vea muy pocas clases de utilidad en Bootstrap, la razón es que este tipo de clase generalmente está mal visto y se recomienda usarlo para: a) creación de prototipos y desarrollo, para que pueda construir rápidamente fuera de sus páginas, luego elimine las clases pull-right y pull-left a favor de aplicar flotantes a clases más semánticas o a los elementos mismos, o b) cuando es claramente más práctico que una solución más semántica.

En su caso, según su pregunta, parece que desea que cierto texto se alinee a la derecha de su tabla, pero no todo. Semánticamente, sería mejor hacer algo como (solo voy a hacer algunas clases aquí, excepto la clase de arranque predeterminada, .table):

  <table class="table price-table">
    <thead>
      <th class="price-label">Total</th>
    </thead>
    <tbody>
      <tr>
        <td class="price-value">$1,000,000.00</td>
      </tr>
    </tbody>
  </table>

Y simplemente aplique las declaraciones text-align: lefto text-align: righta las clases de valor de precio y etiqueta de precio (o cualquier clase que funcione para usted).

El problema con la aplicación align-rightcomo clase es que si desea refactorizar sus tablas, tendrá que rehacer el marcado y los estilos. Si usa clases semánticas, es posible que pueda refactorizar solo el contenido CSS. Además, si se toma el tiempo de aplicar una clase a un elemento, es una buena práctica tratar de asignar un valor semántico a esa clase para que el marcado sea más fácil de navegar para otros programadores (o para usted tres meses después).

Una forma de pensarlo es esta: cuando planteas la pregunta "¿Para qué es esto td?", No obtendrás una aclaración de la respuesta "alinear a la derecha".


1
y, por cierto, estoy seguro de que puedes hacerlo mejor con los nombres de clase de lo que elegí. pero ese no era el énfasis
jonschlinkert

3
No lo hicieron en ese momento, y la OMI todavía no debería.
jonschlinkert

34

Bootstrap 2.3 tiene clases de utilidad text-left, text-righty text-center, pero no funcionan en celdas de la tabla. Hasta que se publique Bootstrap 3.0 (donde han solucionado el problema) y pueda realizar el cambio, he agregado esto a mi CSS del sitio que se carga después de bootstrap.css:

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

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

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

26

Simplemente agregue una hoja de estilo "personalizada" que se carga después de la hoja de estilo de Bootstrap. Entonces las definiciones de clase están sobrecargadas.

En esta hoja de estilo declare la alineación de la siguiente manera:

.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}

Ahora puede utilizar las convenciones de alineación "comunes" para los elementos td y th.


23

Supongo que porque CSS ya tiene text-align:right, AFAIK, Bootstrap no tiene una clase especial para ello.

Bootstrap tiene "pull-right" para divs flotantes, etc. a la derecha.

Bootstrap 2.3 acaba de salir y agregó estilos de alineación de texto:

Bootstrap 2.3 lanzado (2013-02-07)


1
Sí, no quería usar estilos en línea en cada elemento. Sé de pull-right pero no quería que los elementos flotaran. Podría agregar una clase si no hay ninguna :)
Mediabeastnz

15

¡Bootstrap 4 se acerca ! Las clases de utilidad familiarizadas en Bootstrap 3.xahora están habilitadas para el punto de interrupción. Los puntos de ruptura predeterminados son: xs, sm, md, lgy xl, por lo que estas clases de alineación de texto un aspecto similar .text-[breakpoint]-[alignnment].

<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>

Importante: Al escribir esto, Bootstrap 4 solo está en Alpha 2. Estas clases y cómo se usan están sujetas a cambios sin previo aviso.


Esto me tomó por sorpresa al leer los documentos de Bootstrap 3 en una instalación de Bootstrap 4. ¡Gracias por el recordatorio!
Ben Simpson

12

Alineación de texto de Bootstrap en v3.3.5:

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

Ejemplo de CodePen


11

Las siguientes líneas de código funcionan correctamente. Puede asignar las clases como centro de texto, izquierda o derecha, el texto se alineará en consecuencia.

<p class="text-center">Day 1</p> 
<p class="text-left">Day 2</p> 
<p class="text-right">Day 3</p>

Aquí no hay necesidad de crear ninguna clase externa. Estas son las clases Bootstrap y tienen su propia propiedad.


10

Puede usar este CSS a continuación:

.text-right {text-align: right} /* For right align */
.text-left {text-align: left} /* For left align */
.text-center {text-align: center} /* For center align */

8

La .text-alignclase es totalmente válida y más utilizable que tener una .price-labely .price-valueque ya no sirven.

Recomiendo ir al 100% con una clase de utilidad personalizada llamada

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

Me gusta hacer algo de magia, pero eso depende de ti, como algo:

span.pull-right {
  float: none;
  text-align: right;
}

1
Sí, cada clase es totalmente "válida", pero no es semántica. Debe usar las clases de utilidad con moderación en el código de producción, están destinadas a "bootstrapping".
jonschlinkert

3
Porque w3 dice que esa es la forma correcta de usar las clases no significa que sea la mejor. jQuery UI y Bootstrap no existirían si no fuera por las clases 'no semánticas'. Las personas tienden a usar el significado semántico para las clases hasta que se dan cuenta de que elegir el genérico es mucho mejor en todos los aspectos. Al principio es difícil conseguirlo o pensar que es realmente bueno, caminé por ese camino ...
Bart Calixto

1
jQuery UI es un mal ejemplo, porque es una biblioteca javascript que también incluye CSS, y Bootstrap, como señalé, usa clases de utilidad como UTILIDADES. ¿Alguna vez has pensado por qué Bootstrap se llama Bootstrap ? Para que pueda usar estas clases para el desarrollo y cambiarlas en su código de producción. Y no dije que no los usara en absoluto, uso bastante pull-left, pull-right. Y también uso text-center a veces. Pero los uso con moderación y, como primer curso de acción, no recomiendo que otros los usen en lugar de opciones mejores y más semánticas.
jonschlinkert

1
jQuery UI fue solo un ejemplo. El enfoque del que estoy hablando es lo que hace que las bibliotecas funcionen. Podemos ver kendo, blueprint, grid, 960, Chico UI, e incluso Bootstrap hace esto. Es la única forma en que estas bibliotecas pueden existir / funcionar. Puede echar un vistazo a las principales empresas sobre cómo utilizan CSS como Apple ( images.apple.com/v/imac/a/styles/imac.css ) y quedará impresionado. Eso explica la productividad y un gran problema. Debo ser sincero, me sorprendió no haber encontrado ningún tutorial que explique esto. Creo que el término bootstrap es porque es algo que debes comenzar, no cambiarlo más tarde.
Bart Calixto

7

Aquí hay una respuesta corta y dulce con un ejemplo.

table{
    width: 100%;
}
table td, table th {
    border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <table>
    <tr>
      <th class="text-left">Text align left.</th>
      <th class="text-center">Text align center.</th>
      <th class="text-right">Text align right.</th>
    </tr>
    <tr>
      <td class="text-left">Text align left.</td>
      <td class="text-center">Text align center.</td>
      <td class="text-right">Text align right.</td>
    </tr>
  </table>
</body>


Son las etiquetas HTML linky scriptválida fuera de la heado bodylas etiquetas? ¿Por qué no proporcionar un ejemplo de documento HTML completo y válido?
Peter Mortensen


5

Ahora, con el lanzamiento de Bootstrap 3, puede usar las clases de text-centeralineación central, text-left alineación izquierda, text-rightalineación derecha ytext-justify alineación justificada.

Bootstrap es un marco frontend muy simple para trabajar, una vez que lo utiliza. Además de ser muy fácil de personalizar para adaptarse a su gusto.



3

Aquí está la solución más simple.

Puede asignar las clases como centro de texto, izquierda o derecha. El texto se alineará de acuerdo con estas clases. No tiene que hacer clases por separado. Estas clases están incorporadas en BootStrap 3

    <h1 class="text-center"> Heading 1 </h1> 
    <h1 class="text-left"> Heading 2 </h1> 
    <h1 class="text-right"> Heading 3 </h1>

Mira aquí: Demo


1
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
Texto alineado a la izquierda en viewports tamaño MD (medio) o más ancho.

Texto alineado a la izquierda en las ventanas gráficas de tamaño LG (grande) o más ancho.

Texto alineado a la izquierda en las ventanas gráficas tamaño XL (extragrande) o más ancho.


1

En Bootstrap versión 4. Hay algunas clases incorporadas para posicionar texto.

Para centrar el encabezado de la tabla y el texto de datos:

 <table>
    <tr>
      <th class="text-center">Text align center.</th>
    </tr>
    <tr>
      <td class="text-center">Text align center.</td>
    </tr>
  </table>

También puede usar estas clases para posicionar cualquier texto.

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

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider</p>

Para más detalles

Espero que sea de ayuda.


0

En esta clase no válida Bootstrap de tres clases

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

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

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

55
Ya hay varias respuestas de alta calidad a esta pregunta, la mayoría de las cuales se publicaron hace tres años cuando se hizo la pregunta. Si bien puede ser un ejercicio que valga la pena intentar responder preguntas simples como esta para mejorar sus habilidades de programación, publicar esta respuesta en su estado actual no agrega nada a la pregunta. Si hay algo novedoso en su respuesta, tome un par de oraciones para explicar cómo es diferente y por qué eso lo mejora.
MTCoster

¿Qué quieres decir con "En esta clase inválida de Bootstrap de tres clases" ? ¿Puedes elaborar? En particular, para "clase inválida" .
Peter Mortensen

0

Uso text-align:center !important. Puede haber otras text-alignreglas CSS, por lo que !importantes importante.

table,
th,
td {
  color: black !important;
  border-collapse: collapse;
  background-color: yellow !important;
  border: 1px solid black;
  padding: 10px;
  text-align: center !important;
}
<table>
  <tr>
    <th>
      Center aligned text
    </th>
  </tr>
  <tr>
    <td>Center aligned text</td>
    <td>Center aligned text</td>
  </tr>
</table>

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.