Klasa wyrównania tekstu dla wewnątrz tabeli

724

Czy w strukturze Bootstrap na Twitterze jest zestaw klas, który wyrównuje tekst?

Na przykład mam kilka tabel z $sumami, które chcę wyrównać do prawej ...

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

i

<td class="align-right">$1,000,000.00</td>
Mediabeastnz
źródło

Odpowiedzi:

1412

Bootstrap 3

Dokumenty wyrównania tekstu 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>

Przykład wyrównywania tekstu Bootstrap 3

Bootstrap 4

Dokumenty wyrównania tekstu 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>

Przykład wyrównywania tekstu Bootstrap 4

Michael J. Calkins
źródło
29
Niestety nie działa to w przypadku komórek tabeli. Może to być po prostu problem z zamówieniem CSS. Zobacz ten problem [ github.com/twitter/bootstrap/issues/6837] . Należy naprawić w wersji 3.0.
David
26
Atm I zrobić <td> <div class = 'text-center'> bootin </div> </td>, aby obejść ten problem.
Michael J. Calkins
3
Chciałbym, aby bootstrap używał punktów przerwania w tej klasie, takich jak: text-right-md do wyrównywania tekstu do prawej tylko dla średniego wzrostu.
Eric Bishard,
2
<p class = "text-left"> Tekst wyrównany do lewej. </p> <p class = "text-center"> Wyśrodkuj tekst. </p> <p class = "text-right"> Tekst wyrównany do prawej. </p> <p class = "text-justify"> Tekst uzasadniony. </p> <p class = "text-nowrap"> Brak zawijania tekstu. </p>
user5026837
1
Dziwne, że próbowałem użyć text-md-right (i xs i lg), ale nie działały. Byłem w Codepen, więc to może mieć z tym coś wspólnego. W każdym razie ta odpowiedź zadziałała dla mnie. Dzięki!
Edson
76

Używanie Bootstrap 3.x text-rightdziała idealnie:

<td class="text-right">
  text aligned
</td>
Paolo Casciello
źródło
Możesz również zastosować to do całego wiersza: <tr class = "text-right"> <td> tekst wyrównany </td> </tr>
Glade Mellor
46

Nie, Bootstrap nie ma do tego klasy, ale ten rodzaj klasy jest uważany za klasę „użyteczną”, podobną do klasy „.pull-right” wspomnianej przez @anton.

Jeśli spojrzysz na narzędzia. Jeśli nie zobaczysz bardzo niewielu klas narzędzi w Bootstrap, powód jest taki, że ten rodzaj klasy jest zasadniczo niezadowolony i zaleca się go używać do: a) prototypowania i programowania - abyś mógł szybko zbudować na swoich stronach, a następnie usuń klasy „pull-right” i „pull-left” na rzecz zastosowania liczb zmiennoprzecinkowych do większej liczby klas semantycznych lub do samych elementów, lub b) gdy jest to wyraźnie bardziej praktyczne niż rozwiązanie bardziej semantyczne.

W twoim przypadku po twoim pytaniu wygląda na to, że chcesz wyrównać tekst po prawej stronie w tabeli, ale nie wszystkie. Semantycznie lepiej byłoby zrobić coś takiego (zamierzam tylko stworzyć tutaj kilka klas, z wyjątkiem domyślnej klasy bootstrap, .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>

I po prostu zastosuj text-align: leftlub text-align: rightdeklaracje do klas cen-wartość i klas etykiet cenowych (lub dowolnych klas, które działają dla Ciebie).

Problem z aplikacją align-rightjako klasą polega na tym, że jeśli chcesz przefakturować swoje tabele, będziesz musiał przerobić znaczniki i style. Jeśli używasz klas semantycznych, być może uda Ci się uniknąć refaktoryzacji tylko treści CSS. Ponadto, jeśli poświęcasz czas na zastosowanie klasy do elementu, najlepszą praktyką jest próba przypisania wartości semantycznej do tej klasy, aby ułatwić nawigację znacznikom dla innych programistów (lub ciebie trzy miesiące później).

Jednym ze sposobów, aby o tym pomyśleć jest: kiedy zadajesz pytanie „Po co to jest?”, Nie uzyskasz wyjaśnienia od odpowiedzi „wyrównaj do prawej”.

jonschlinkert
źródło
1
a tak przy okazji, jestem pewien, że lepiej poradzisz sobie z nazwami klas niż z tym, co wybrałem. ale to nie był nacisk
jonschlinkert
3
Nie zrobili tego w tym czasie, a IMO nadal nie powinna.
jonschlinkert
34

Bootstrap 2.3 zawiera klasy narzędziowe text-left, text-rightoraz text-center, ale one nie działają w komórkach tabeli. Do czasu wydania Bootstrap 3.0 (gdzie rozwiązali problem) i nie jestem w stanie dokonać zmiany, dodałem to do mojego CSS witryny, który jest ładowany po bootstrap.css:

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

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

.text-left {
    text-align: left !important;
}
David
źródło
26

Wystarczy dodać „niestandardowy” arkusz stylów, który jest ładowany po arkuszu stylów Bootstrap. Definicje klas są więc przeciążone.

W tym arkuszu stylów zadeklaruj wyrównanie w następujący sposób:

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

Teraz możesz używać „wspólnych” konwencji wyrównania dla elementów td i th.

Michał
źródło
23

Myślę, że ponieważ CSS już ma text-align:right, AFAIK, Bootstrap nie ma dla niego specjalnej klasy.

Bootstrap ma funkcję „pull-right” dla pływających div, itp. Po prawej stronie.

Właśnie wyszedł Bootstrap 2.3 i dodał style wyrównania tekstu:

Wydano Bootstrap 2.3 (2013-02-07)

Anton
źródło
1
Tak, nie chciałem używać stylów wbudowanych w każdym elemencie. Wiem o pull-right, ale nie chciałem, żeby elementy się unosiły. Mogę po prostu dodać klasę, jeśli jej nie ma :)
Mediabeastnz 10.10 o
15

Nadchodzi Bootstrap 4 ! Klasy narzędzi, które zostały zaznajomione z Bootstrap, 3.xsą teraz włączone do punktu przerwania. Domyślne wartości graniczne są: xs, sm, md, lgixl tak te zajęcia wyrównanie tekstu wyglądać podobnie .text-[breakpoint]-[alignnment].

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

Ważne: w chwili pisania tego Bootstrap 4 jest tylko w wersji Alpha 2. Te klasy i sposób ich użycia mogą ulec zmianie bez powiadomienia.

dKen
źródło
To mnie zaskoczyło podczas czytania dokumentacji Bootstrap 3 w instalacji Bootstrap 4. Dzięki za przypomnienie!
Ben Simpson
12

Wyrównanie tekstu bootstrap w wersji 3.3.5:

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

Przykład CodePen

Gothburz
źródło
11

Następujące wiersze kodu działają poprawnie. Możesz przypisać klasy takie jak środek tekstu, lewy lub prawy. Tekst zostanie odpowiednio wyrównany.

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

Tutaj nie ma potrzeby tworzenia żadnej klasy zewnętrznej. Są to klasy Bootstrap i mają swoją własność.

Vanshaj Rai
źródło
10

Możesz użyć tego CSS poniżej:

.text-right {text-align: right} /* For right align */
.text-left {text-align: left} /* For left align */
.text-center {text-align: center} /* For center align */
kushal kant
źródło
8

.text-alignKlasa jest całkowicie poprawny i bardziej użyteczny niż posiadanie .price-labeli.price-value które są bezużyteczne więcej.

Polecam skorzystanie w 100% z niestandardowej klasy narzędzi o nazwie

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

Lubię robić magię, ale to zależy od ciebie, jak coś:

span.pull-right {
  float: none;
  text-align: right;
}
Bart Calixto
źródło
1
Tak, każda klasa jest całkowicie „ważna”, ale nie jest semantyczna. Powinieneś oszczędnie używać klas narzędzi w kodzie produkcyjnym, są one przeznaczone do „ładowania systemu”.
jonschlinkert
3
Ponieważ w3 mówi, że to właściwy sposób używania klauzul, nie oznacza, że ​​jest najlepszy. Interfejs jQuery i Bootstrap nie istniałyby, gdyby nie z powodu klas „nie-semantycznych”. Ludzie mają tendencję do używania semantycznego znaczenia dla klauzul, dopóki nie zdadzą sobie sprawy, że wybór rodzaju ogólnego jest znacznie lepszy pod każdym względem. Na początku trudno go zdobyć lub pomyśleć, że jest naprawdę dobry, szedłem tą drogą ...
Bart Calixto
1
Interfejs jQuery jest złym przykładem, ponieważ jest to biblioteka javascript, która zawiera również CSS, a Bootstrap, jak wskazałem, wykorzystuje klasy narzędzi jako UTILITIES. Czy zastanawiałeś się kiedyś, dlaczego Bootstrap nazywa się Bootstrap ? Abyś mógł używać tych klas do programowania i zmieniać je w kodzie produkcyjnym. I nie powiedziałem, żeby ich wcale nie używać, używam przeciągania w lewo, ciągnięcia w prawo całkiem sporo. Czasami używam także centrum tekstowego. Ale używam ich oszczędnie i jako pierwszy krok nie zalecam, aby inni używali ich zamiast lepszych, bardziej semantycznych opcji.
jonschlinkert
1
Interfejs jQuery był tylko przykładem. Podejście, o którym mówię, sprawia, że ​​biblioteki działają. Widzimy, że robią to kendo, plan, siatka, 960, interfejs użytkownika Chico, a nawet sam Bootstrap. To jedyny sposób, w jaki biblioteki te mogą istnieć / działać. Możesz spojrzeć na duże firmy, w jaki sposób używają css, takie jak Apple ( images.apple.com/v/imac/a/styles/imac.css ) i będziesz pod wrażeniem. To wyjaśnia produktywność i ogromną sprawę. Muszę być szczery, byłem zaskoczony, że nie znalazłem ŻADNEGO tutoriala wyjaśniającego to. Myślę, że termin „bootstrap” to dlatego, że musisz zacząć, a nie później.
Bart Calixto
7

Oto krótka i słodka odpowiedź z przykładem.

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>

Hitesh
źródło
Są to znaczniki HTML linki scriptważne poza nim, headczy bodyznaczniki? Dlaczego nie podać pełnego i prawidłowego przykładu dokumentu HTML?
Peter Mortensen
6

Rozwijając odpowiedź Davida , po prostu dodałem prostą klasę do rozszerzenia Bootstrap w następujący sposób:

.money, .number {
    text-align: right !important;
}
anopres
źródło
5

Ow, wraz z wydaniem Bootstrap 3, możesz użyć klas text-centerwyrównania do środka, wyrównania text-left do lewej, wyrównania text-rightdo prawej i text-justifywyrównania wyrównanego.

Bootstrap jest bardzo prostą strukturą frontendową do pracy, gdy go wykorzystasz. Poza tym można go bardzo łatwo dostosować do własnych upodobań.

Jordan D. Angus
źródło
3

Mamy na to pięć klas, do których możesz się odwołać tutaj: 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>

Ganesh Putta
źródło
3

Oto najprostsze rozwiązanie

Możesz przypisać klasy takie jak centrum tekstu, lewo lub prawo. Tekst zostanie wyrównany zgodnie z tymi klasami. Nie musisz tworzyć zajęć osobno. Klasy te są wbudowane w BootStrap 3

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

Sprawdź tutaj: Demo

Wali
źródło
1
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
Wyrównany do lewej tekst w rzutniach o rozmiarze MD (średni) lub szerszym.

Wyrównany do lewej tekst w rzutniach o rozmiarze LG (duży) lub szerszy.

Wyrównany do lewej tekst w rzutniach o rozmiarze XL (bardzo duży) lub szerszym.

Ch UmarJamil
źródło
1

W wersji Bootstrap 4. Istnieją wbudowane klasy do pozycjonowania tekstu.

W przypadku centrowania nagłówka tabeli i tekstu danych:

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

Możesz także użyć tych klas do pozycjonowania dowolnego tekstu.

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

Po więcej szczegółów

Mam nadzieję, że to ci pomoże.

Majedur Rahaman
źródło
0

W tej trzyklasie Bootstrap jest niepoprawna klasa

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

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

 .text-left {
    text-align: left; }
Projektant Ashu
źródło
5
Istnieje już kilka wysokiej jakości odpowiedzi na to pytanie, z których większość została opublikowana trzy lata temu, kiedy pytanie zostało zadane. Chociaż warto spróbować odpowiedzieć na proste pytania, takie jak to, aby rozwinąć swoje umiejętności programowania, opublikowanie tej odpowiedzi w jej obecnym stanie nie dodaje niczego do pytania. Jeśli w twojej odpowiedzi jest coś nowego, weź kilka zdań, aby wyjaśnić, jak się różni i dlaczego to poprawia.
MTCoster,
Co rozumiesz przez „w tej trzyklasie Bootstrap niepoprawna klasa” ? Czy możesz rozwinąć? W szczególności dla „niepoprawnej klasy” .
Peter Mortensen
0

Zastosowanie text-align:center !important. Mogą istnieć inne text-alignreguły css, więc !importantjest to ważne.

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>

Justin Liu
źródło