Classe d'alignement de texte pour l'intérieur d'une table


724

Existe-t-il un ensemble de classes dans le framework Bootstrap de Twitter qui aligne le texte?

Par exemple, j'ai quelques tableaux avec des $totaux que je veux aligner à droite ...

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

et

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

Réponses:


1412

Bootstrap 3

Documents d'alignement de texte v3

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

Exemple d'alignement de texte Bootstrap 3

Bootstrap 4

Documents d'alignement de texte v4

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

Exemple d'alignement de texte Bootstrap 4


29
Cela ne fonctionne malheureusement pas pour les cellules du tableau. Il peut simplement s'agir d'un problème de commande CSS. Consultez ce numéro [ github.com/twitter/bootstrap/issues/6837] . Doit être corrigé dans la version 3.0.
David

26
Atm Je fais <td> <div class = 'text-center'> bootin </div> </td> pour contourner ce problème.
Michael J. Calkins

3
Je souhaite que bootstrap utilise les points d'arrêt avec cette classe comme: text-right-md pour aligner le texte à droite uniquement pour le milieu vers le haut.
Eric Bishard

2
<p class = "text-left"> Texte aligné à gauche. </p> <p class = "text-center"> Texte aligné au centre. </p> <p class = "text-right"> Texte aligné à droite. </p> <p class = "text-justification"> Texte justifié. </p> <p class = "text-nowrap"> Pas de texte d'habillage. </p>
user5026837

1
C'est bizarre d'avoir essayé d'utiliser text-md-right (et xs & lg) mais cela ne fonctionnerait pas. J'étais à Codepen, donc cela peut avoir quelque chose à voir avec ça. Quoi qu'il en soit, cette réponse a fonctionné pour moi. Merci!
Edson

76

L'utilisation de Bootstrap 3.x text-rightfonctionne parfaitement:

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

Vous pouvez également appliquer cela à toute la ligne: <tr class = "text-right"> <td> text aligné </td> </tr>
Glade Mellor

46

Non, Bootstrap n'a pas de classe pour cela, mais ce type de classe est considéré comme une classe "utilitaire", similaire à la classe ".pull-right" mentionnée par @anton.

Si vous regardez utilities.less, vous verrez très peu de classes d'utilitaires dans Bootstrap, la raison étant que ce type de classe est généralement mal vu et qu'il est recommandé de l'utiliser pour: a) le prototypage et le développement - afin que vous puissiez rapidement construire sortez vos pages, puis supprimez les classes pull-right et pull-left au profit de l'application de flottants à des classes plus sémantiques ou aux éléments eux-mêmes, ou b) quand c'est clairement plus pratique qu'une solution plus sémantique.

Dans votre cas, par votre question, il semble que vous souhaitiez aligner un certain texte à droite dans votre tableau, mais pas tout. Sémantiquement, il serait préférable de faire quelque chose comme (je vais juste inventer quelques classes ici, à l'exception de la classe d'amorçage par défaut, .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>

Et appliquez simplement les déclarations text-align: leftor text-align: rightaux classes value-value et price-label (ou à toutes les classes qui fonctionnent pour vous).

Le problème avec l'application en align-righttant que classe est que si vous voulez refactoriser vos tables, vous devrez refaire le balisage et les styles. Si vous utilisez des classes sémantiques, vous pourrez peut-être vous en sortir en ne refactorisant que le contenu CSS. De plus, si vous prenez le temps d'appliquer une classe à un élément, il est préférable d'essayer d'attribuer une valeur sémantique à cette classe afin que le balisage soit plus facile à naviguer pour d'autres programmeurs (ou vous trois mois plus tard).

Une façon d'y penser est la suivante: lorsque vous posez la question "A quoi sert ce td?", Vous n'obtiendrez pas de clarification de la réponse "align-right".


1
et en passant, je suis sûr que vous pouvez faire mieux avec les noms de classe que ce que j'ai choisi. mais ce n'était pas l'accent
jonschlinkert

3
Ils ne l'ont pas fait à l'époque, et l'OMI ne devrait toujours pas.
jonschlinkert

34

Bootstrap 2.3 a des classes de services publics text-left, text-rightet text-center, mais ils ne fonctionnent pas dans les cellules de table. Jusqu'à ce que Bootstrap 3.0 soit publié (où ils ont résolu le problème) et que je puisse effectuer le changement, j'ai ajouté ceci à mon site CSS qui est chargé après bootstrap.css:

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

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

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

26

Ajoutez simplement une feuille de style "personnalisée" qui est chargée après la feuille de style de Bootstrap. Les définitions de classe sont donc surchargées.

Dans cette feuille de style, déclarez l'alignement comme suit:

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

Vous pouvez maintenant utiliser les conventions d'alignement "communes" pour les éléments td et th.


23

Je suppose que parce que CSS a déjà text-align:right, AFAIK, Bootstrap n'a pas de classe spéciale pour cela.

Bootstrap a "pull-right" pour les divs flottants, etc. à droite.

Bootstrap 2.3 vient de sortir et a ajouté des styles d'alignement de texte:

Sortie de Bootstrap 2.3 (2013-02-07)


1
Oui, je ne voulais pas utiliser de styles en ligne sur chaque élément. Je connais le pull-right mais je ne voulais pas que les éléments flottent. Je pourrais juste ajouter une classe s'il n'y en a pas :)
Mediabeastnz

15

Bootstrap 4 arrive ! Les classes utilitaires rendues familières dans Bootstrap 3.xsont désormais activées pour les points d'arrêt. Les points d' arrêt par défaut sont: xs, sm, md, lget xl, donc ces classes d'alignement du texte ressemblent à .text-[breakpoint]-[alignnment].

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

Important: Au moment d'écrire ces lignes, Bootstrap 4 est uniquement en Alpha 2. Ces classes et la façon dont elles sont utilisées sont sujettes à changement sans préavis.


Cela m'a pris au dépourvu lors de la lecture des documents Bootstrap 3 sur une installation Bootstrap 4. Merci pour le rappel!
Ben Simpson

12

Alignement du texte d'amorçage dans la v3.3.5:

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

Exemple CodePen


11

Les lignes de code suivantes fonctionnent correctement. Vous pouvez affecter les classes comme text-center, gauche ou droite, le texte s'alignera en conséquence.

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

Ici, il n'est pas nécessaire de créer une classe externe. Ce sont les classes Bootstrap et ont leur propre propriété.


10

Vous pouvez utiliser ce CSS ci-dessous:

.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-alignclasse est totalement valide et plus utilisable que d'avoir un .price-labelet .price-valuequi ne sert plus à rien.

Je recommande d'aller à 100% avec une classe d'utilitaires personnalisée appelée

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

J'aime faire de la magie, mais ça dépend de vous, comme quelque chose:

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

1
Oui, chaque classe est totalement "valide", mais ce n'est pas sémantique. Vous devez utiliser les classes utilitaires avec parcimonie dans le code de production, elles sont destinées au "bootstrap".
jonschlinkert

3
Parce que w3 dit que c'est la bonne façon d'utiliser les clases ne signifie pas que c'est le meilleur. jQuery UI et Bootstrap n'existeraient pas s'ils n'étaient pas à cause de classes «non sémantiques». Les gens ont tendance à utiliser le sens sémantique pour les classes jusqu'à ce qu'ils se rendent compte que le générique est bien meilleur à tous égards. C'est difficile de l'obtenir au début ou de penser que c'est vraiment bon, j'ai parcouru cette route ...
Bart Calixto

1
jQuery UI est un mauvais exemple, car c'est une bibliothèque javascript qui comprend également CSS, et Bootstrap, comme je l'ai souligné, utilise des classes utilitaires comme UTILITAIRES. Avez-vous déjà pensé à la raison pour laquelle Bootstrap est appelé Bootstrap ? Afin que vous puissiez utiliser ces classes pour le développement et les modifier dans votre code de production. Et je n'ai pas dit de ne pas les utiliser du tout, j'utilise beaucoup pull-left, pull-right. Et j'utilise aussi parfois le centre de texte. Mais je les utilise avec parcimonie, et je ne recommande pas dans un premier temps que d'autres les utilisent sur des options meilleures et plus sémantiques.
jonschlinkert

1
jQuery UI n'était qu'un exemple. L'approche dont je parle est ce qui fait fonctionner les bibliothèques. Nous pouvons voir kendo, blueprint, grid, 960, Chico UI et même Bootstrap lui-même. C'est la seule façon dont ces bibliothèques peuvent exister / fonctionner. Vous pouvez jeter un œil aux grandes entreprises sur la façon dont elles utilisent les CSS comme Apple ( images.apple.com/v/imac/a/styles/imac.css ) et vous serez impressionné. Cela représente la productivité et une question énorme. Doit être honnête, j'ai été étonné de ne trouver aucun tutoriel expliquant cela. Je pense que le terme bootstrap est parce que c'est quelque chose que vous devez commencer, ne pas changer plus tard.
Bart Calixto

7

Voici une réponse courte et douce avec un exemple.

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>


Les balises HTML sont link-elles scriptvalides en dehors des balises headou body? Pourquoi ne pas fournir un exemple de document HTML complet et valide?
Peter Mortensen

6

En développant la réponse de David , j'ajoute juste une classe simple pour augmenter Bootstrap comme ceci:

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

5

Ow, avec la sortie de Bootstrap 3, vous pouvez utiliser les classes de text-centerpour l'alignement au centre, text-left pour l'alignement à gauche, text-rightpour l'alignement à droite et text-justifypour un alignement justifié.

Bootstrap est un framework frontend très simple à utiliser, une fois que vous l'utilisez. En plus d'être très facile à personnaliser selon vos goûts.



3

Voici la solution la plus simple

Vous pouvez affecter les classes comme text-center, gauche ou droite. Le texte s'alignera en conséquence sur ces classes. Vous n'avez pas à faire des cours séparément. Ces classes sont intégrées dans BootStrap 3

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

Vérifiez ici: Démo


1
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
Texte aligné à gauche sur les fenêtres de taille MD (moyenne) ou plus large.

Texte aligné à gauche sur les fenêtres de taille LG (grande) ou plus large.

Texte aligné à gauche sur les fenêtres de taille XL (extra-large) ou plus large.


1

Dans la version Bootstrap 4. Il y a quelques classes intégrées pour positionner le texte.

Pour centrer l'en-tête du tableau et le texte des données:

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

Vous pouvez également utiliser ces classes pour positionner n'importe quel texte.

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

Pour plus de détails

J'espère que cela vous aidera.


0

Dans cette classe Bootstrap non valide à trois classes

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

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

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

5
Il existe déjà plusieurs réponses de haute qualité à cette question, dont la plupart ont été publiées il y a trois ans lorsque la question a été posée. Bien qu'il puisse être utile de tenter de répondre à des questions simples comme celle-ci afin de développer vos capacités de programmation, la publication de cette réponse dans son état actuel n'ajoute rien à la question. S'il y a quelque chose de nouveau dans votre réponse, veuillez prendre quelques phrases pour expliquer en quoi elle est différente et pourquoi cela la rend meilleure.
MTCoster

Que voulez-vous dire par «Dans cette classe Bootstrap invalide à trois classes» ? Peux-tu élaborer? En particulier, pour "classe invalide" .
Peter Mortensen

0

Utilisez text-align:center !important. Il peut y avoir d'autres text-alignrègles CSS, c'est pourquoi !importantc'est important.

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>

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.