Text-align Klasse für innerhalb einer Tabelle

Question

Gibt es eine Reihe von Klassen im Bootstrap-Framework von Twitter, die Text ausrichten?

Ich habe zum Beispiel einige Tabellen mit $ Summen, die ich rechts ausgerichtet haben möchte...

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

und

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

Answer 1

Bootstrap 4 hat dafür fünf Klassen: text-left , text-center , text-right , text-justify y text-nowrap .

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<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 starts here. The quick brown fox jumps over the lazy dog. Justified text ends here.</div>
<div class="text-nowrap">No wrap text starts here. The quick brown fox jumps over the lazy dog. No wrap text ends here.</div>

Answer 2

Hier ist die einfachste Lösung

Sie können die Klassen wie Text-Mitte, Links oder Rechts zuweisen. Der Text wird dann entsprechend dieser Klassen ausgerichtet. Sie müssen die Klassen nicht separat erstellen. Diese Klassen sind in BootStrap 3 bereits integriert

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

Sehen Sie hier nach: Demo

Answer 3

In Bootstrap Version 4. Es gibt einige eingebaute Klassen, um Text zu positionieren.

Zum Zentrieren von Tabellenkopf und Datentext:

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

Sie können diese Klassen auch verwenden, um einen beliebigen Text zu positionieren.

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

Für weitere Einzelheiten

Answer 4

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>

Linksbündiger Text in Ansichtsfenstern der Größe MD (mittel) oder breiter.

Linksbündiger Text in Ansichtsfenstern der Größe LG (groß) oder breiter.

Linksbündiger Text in Ansichtsfenstern der Größe XL (extragroß) oder breiter.

Answer 5

Utilice text-align:center !important . Möglicherweise gibt es andere text-align css-Regeln, damit die !important ist wichtig.

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>