justificar - centrar texto en html

Bootstrap-Clase de alineación de texto para tabla interna

Question

¿Hay un conjunto de clases en Twitters Bootstrap Framework que alinee 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>

Answer 1

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>

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>

Answer 2

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

Puede asignar las clases como centro de texto, izquierda o derecha. El texto se alineará en consecuencia a estas clases. No tienes 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>

Compruebe aquí: Demo

Answer 3

Alineamiento de texto 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

Answer 4

Ampliando la respuesta de David, solo agrego una clase simple para aumentar Bootstrap de esta manera:

.money, .number {
    text-align: right !important;
}

Answer 5

Bootstrap 2.3 tiene clases de utilidad text-left, text-right y text-center, pero no funcionan en celdas de tabla. Hasta que se libere bootstrap 3.0 (donde se solucionó el problema) y puedo hacer el cambio, he agregado esto a mi sitio CSS 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;
}

Answer 6

Esta línea de código está funcionando 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 es necesario crear ninguna clase externa, estas son las clases de arranque y tienen su propia propiedad.

Answer 7

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 @anton mencionó.

Si observa utilities.less verá muy pocas clases de utilidades en Bootstrap, la razón es que este tipo de clase generalmente está mal visto y se recomienda su uso 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 más clases semánticas o a los propios elementos, 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 en su tabla, pero no todo. Semánticamente, sería mejor hacer algo como (voy a hacer algunas clases aquí, excepto la clase predeterminada de arranque, .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 de text-align: right text-align: left o text-align: right a las clases de precio-valor y etiqueta de precio (o cualquier clase que le funcione).

El problema de aplicar la align-right como clase, es que si desea refactorizar sus tablas, tendrá que rehacer el marcado y los estilos. Si usas clases semánticas, podrías salirte con la refactorización solo del 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 tres meses después).

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

Answer 8

Ow, con el lanzamiento de bootstrap 3, puede usar las clases de text-center de text-center para alineación central, text-left para alinear a la izquierda, text-right para alinear a la derecha y text-justify para una alineación justificada.

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

Answer 9

Puedes 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*/

Answer 10

Si está utilizando Bootstrap 3.x

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

O si estás utilizando Bootstrap 4

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

Las clases de utilidad de Boostrap 4 se hicieron familiares en Bootstrap 3.x. La diferencia es ahora punto de ruptura habilitado. Los puntos de interrupción predeterminados son: xs, sm, md, lg and xl, por lo que estas clases de alineación de texto se parecen a .text- [punto de interrupción] - [alineación]

Answer 11

Solo agrega una hoja de estilo "personalizada" que se carga después de la hoja de estilo de Bootstrap. Así que 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.

Answer 12

Supongo que porque css ya tiene text-align:right bootstrap de AFAIK no tiene una clase especial para ello.

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

ACTUALIZACIÓN bootstrap 2.3 acaba de salir y añadió estilos de alineación de texto

http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/

Answer 13

Tenemos cinco clases para eso, que puede consultar aquí: http://v4-alpha.getbootstrap.com/components/utilities/

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

Answer 14

Usar Bootstrap 3.x usando text-right funciona perfectamente:

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

Answer 15

Bootstrap 4 se acerca ! Las clases de utilidades que se hicieron familiares en Bootstrap 3.x ahora están habilitadas para puntos de interrupción. Los puntos de interrupción predeterminados son: xs , sm , md , lg y xl , por lo que estas clases de alineación de texto se parecen a .text-[breakpoint]-[alignnment] .

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

Importante: A la hora de escribir esto, Bootstrap 4 solo está en Alpha 2. Estas clases y su uso están sujetos a cambios sin previo aviso.

Answer 16

.text-align clase .text-align es totalmente válida y más utilizable que tener una .price-label .price-value que 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;
}

Answer 17

Aquí está la respuesta corta y dulce con el 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>

Answer 18

En esta clase inválida bootstrap de tres clases

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

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

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

Answer 19

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p> Texto alineado a la izquierda en viewports de tamaño MD (medio) o más ancho. El texto alineado a la izquierda en las vistas de tamaño LG (grande) o más ancho. El texto alineado a la izquierda en las vistas de tamaño XL (extra grande) o más ancho.