Kelas perataan teks untuk di dalam tabel


724

Apakah ada seperangkat kelas dalam kerangka Bootstrap Twitter yang menyelaraskan teks?

Misalnya, saya memiliki beberapa tabel dengan $total yang ingin saya selaraskan ke kanan ...

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

dan

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

Jawaban:


1412

Bootstrap 3

v3 Dokumen Alignment Teks

<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 3 menyelaraskan teks contoh

Bootstrap 4

v4 Dokumen Alignment Teks

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

Bootstrap 4 contoh pelurusan teks


29
Sayangnya, ini tidak berfungsi untuk sel tabel. Ini mungkin hanya masalah pesanan CSS. Lihat masalah ini [ github.com/twitter/bootstrap/issues/6837] . Harus diperbaiki di versi 3.0.
David

26
Atm Saya lakukan <td> <div class = 'text-center'> bootin </div> </td> untuk menyiasatinya.
Michael J. Calkins

3
Saya berharap bootstrap menggunakan breakpoints dengan kelas ini seperti: text-right-md untuk menyelaraskan teks ke kanan hanya untuk menengah ke atas.
Eric Bishard

2
<p class = "text-left"> Teks rata kiri. </p> <p class = "text-center"> Teks rata tengah. </p> <p class = "text-right"> Teks rata kanan. </p> <p class = "text-justify"> Teks yang dibenarkan. </p> <p class = "text-nowrap"> Tanpa bungkus teks. </p>
user5026837

1
Sungguh aneh bahwa saya mencoba menggunakan teks-md-right (dan xs & lg) tetapi mereka tidak akan berfungsi. Saya berada di Codepen sehingga mungkin ada hubungannya dengan itu. Bagaimanapun, jawaban ini berhasil untuk saya. Terima kasih!
Edson

76

Menggunakan Bootstrap 3.x menggunakan text-rightberfungsi dengan sempurna:

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

Anda juga dapat menerapkan ini pada seluruh baris, juga: <tr class = "text-right"> <td> teks selaras </td> </tr>
Glade Mellor

46

Tidak, Bootstrap tidak memiliki kelas untuk itu, tetapi kelas semacam ini dianggap sebagai kelas "utilitas", mirip dengan kelas ".pull-right" yang disebutkan @anton.

Jika Anda melihat utilitas. Kecuali Anda akan melihat sangat sedikit kelas utilitas di Bootstrap, alasannya karena kelas semacam ini umumnya disukai, dan direkomendasikan untuk digunakan untuk: a) prototipe dan pengembangan - sehingga Anda dapat dengan cepat membangun keluarkan halaman Anda, lalu hapus kelas tarik-kanan dan tarik-kiri untuk menerapkan mengapung ke kelas yang lebih semantik atau ke elemen itu sendiri, atau b) ketika itu jelas lebih praktis daripada solusi yang lebih semantik.

Dalam kasus Anda, menurut pertanyaan Anda, sepertinya Anda ingin memiliki teks yang lurus di kanan dalam tabel Anda, tetapi tidak semuanya. Semantik, akan lebih baik untuk melakukan sesuatu seperti (Saya hanya akan membuat beberapa kelas di sini, kecuali kelas bootstrap default, .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>

Dan cukup terapkan text-align: leftatau text-align: rightdeklarasi ke kelas harga-nilai dan label-harga (atau kelas apa pun yang cocok untuk Anda).

Masalah dengan menerapkan align-rightsebagai kelas, adalah bahwa jika Anda ingin memperbaiki tabel Anda, Anda harus mengulangi markup dan gaya. Jika Anda menggunakan kelas semantik, Anda mungkin bisa lolos dengan hanya mengembalikan konten CSS. Plus, jika meluangkan waktu untuk menerapkan kelas ke elemen, praktik terbaik untuk mencoba menetapkan nilai semantik ke kelas itu sehingga markup lebih mudah dinavigasi untuk programmer lain (atau Anda tiga bulan kemudian).

Satu cara untuk memikirkannya adalah ini: ketika Anda mengajukan pertanyaan "Untuk apa ini?", Anda tidak akan mendapatkan klarifikasi dari jawaban "luruskan-kanan".


1
dan omong-omong, saya yakin Anda bisa melakukan lebih baik dengan nama-nama kelas daripada apa yang saya pilih. tapi itu bukan penekanannya
jonschlinkert

3
Mereka tidak melakukannya saat itu, dan IMO tetap tidak seharusnya.
jonschlinkert

34

Bootstrap 2.3 memiliki kelas utilitas text-left, text-rightdan text-center, tetapi mereka tidak bekerja dalam sel tabel. Sampai Bootstrap 3.0 dirilis (di mana mereka telah memperbaiki masalah) dan saya dapat beralih, saya telah menambahkan ini ke CSS situs saya yang dimuat setelah bootstrap.css:

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

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

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

26

Cukup tambahkan stylesheet "khusus" yang dimuat setelah stylesheet Bootstrap. Jadi definisi kelas kelebihan beban.

Dalam stylesheet ini deklarasikan perataan sebagai berikut:

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

Sekarang Anda dapat menggunakan konvensi penyelarasan "umum" untuk elemen td dan th.


23

Saya kira karena CSS sudah memiliki text-align:right, AFAIK, Bootstrap tidak memiliki kelas khusus untuk itu.

Bootstrap memang memiliki "pull-right" untuk div mengambang, dll ke kanan.

Bootstrap 2.3 baru saja keluar dan menambahkan gaya pelurusan teks:

Bootstrap 2.3 dirilis (2013-02-07)


1
Ya saya tidak ingin menggunakan gaya sebaris pada setiap elemen. Saya tahu tentang pull-right tapi saya tidak ingin elemennya melayang. Saya mungkin hanya menambahkan kelas jika tidak ada :)
Mediabeastnz

15

Bootstrap 4 akan datang ! Kelas utilitas yang dikenali di Bootstrap 3.xsekarang diaktifkan dengan break-point. Breakpoints default: xs, sm, md, lgdan xl, sehingga kelas perataan teks ini terlihat seperti .text-[breakpoint]-[alignnment].

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

Penting: Saat menulis ini, Bootstrap 4 hanya ada di Alpha 2. Kelas-kelas ini dan bagaimana mereka digunakan dapat berubah tanpa pemberitahuan.


Ini membuat saya lengah saat membaca Bootstrap 3 docs pada instalasi Bootstrap 4. Terima kasih atas pengingatnya!
Ben Simpson

12

Bootstrap perataan teks di v3.3.5:

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

Contoh CodePen


11

Baris kode berikut berfungsi dengan benar. Anda dapat menetapkan kelas-kelas seperti pusat teks, kiri atau kanan, Teks akan menyelaraskan sesuai.

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

Di sini tidak perlu membuat kelas eksternal. Ini adalah kelas-kelas Bootstrap dan memiliki properti mereka sendiri.


10

Anda dapat menggunakan CSS ini di bawah:

.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

The .text-alignkelas benar-benar valid dan lebih bermanfaat daripada memiliki .price-labeldan .price-valueyang tidak ada gunanya lagi.

Saya sarankan pergi 100% dengan kelas utilitas kustom yang disebut

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

Saya suka melakukan sihir, tetapi itu terserah Anda, seperti sesuatu:

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

1
Ya, setiap kelas benar-benar "valid", tetapi tidak semantik. Anda harus menggunakan kelas utilitas dengan hemat dalam kode produksi, mereka dimaksudkan untuk "bootstrap".
jonschlinkert

3
Karena w3 mengatakan itu cara yang tepat untuk menggunakan klausa bukan berarti itu yang terbaik. jQuery UI dan Bootstrap tidak akan ada jika bukan karena kelas 'non-semantik'. Orang cenderung menggunakan makna semantik untuk klausa sampai mereka menyadari bahwa menggunakan generik jauh lebih baik dalam semua aspek. Sulit untuk mendapatkannya pada awalnya atau berpikir bahwa itu sebenarnya bagus, saya berjalan di jalan itu ...
Bart Calixto

1
jQuery UI adalah contoh yang buruk, karena ini adalah pustaka javascript yang juga menyertakan CSS, dan Bootstrap, seperti yang saya tunjukkan, menggunakan kelas utilitas sebagai UTILITIES. Pernahkah Anda memikirkan mengapa Bootstrap disebut Bootstrap ? Sehingga Anda dapat menggunakan kelas-kelas ini untuk pengembangan dan mengubahnya dalam kode produksi Anda. Dan saya tidak mengatakan untuk tidak menggunakannya sama sekali, saya menggunakan pull-left, pull-right sedikit. Dan kadang-kadang saya juga menggunakan pusat teks. Tetapi saya menggunakannya dengan hemat, dan saya tidak sebagai tindakan pertama yang merekomendasikan orang lain menggunakannya lebih baik, lebih banyak opsi semantik.
jonschlinkert

1
jQuery UI hanyalah sebuah contoh. Pendekatan yang saya bicarakan adalah apa yang membuat perpustakaan bekerja. Kita dapat melihat kendo, cetak biru, kisi, 960, Chico UI, dan bahkan Bootstrap sendiri melakukan ini. Ini satu-satunya cara perpustakaan ini bisa ada / berfungsi. Anda dapat melihat pada perusahaan besar bagaimana mereka menggunakan css seperti Apple ( images.apple.com/v/imac/a/styles/imac.css ) dan Anda akan terkesan. Itu menjelaskan produktivitas dan masalah besar. Harus jujur, saya kagum menemukan tutorial TIDAK menjelaskan ini. Saya pikir istilah bootstrap itu karena itu adalah sesuatu yang harus Anda mulai, bukan untuk mematikan nanti.
Bart Calixto

7

Inilah jawaban singkat dan manis dengan sebuah contoh.

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>


Apakah tag HTML linkdan scriptvalid di luar headatau bodytag? Mengapa tidak memberikan contoh dokumen HTML yang lengkap dan valid?
Peter Mortensen

6

Memperluas jawaban David , saya hanya menambahkan kelas sederhana untuk menambah Bootstrap seperti ini:

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

5

Ow, dengan rilis Bootstrap 3, Anda dapat menggunakan kelas text-centeruntuk perataan tengah, text-left untuk perataan kiri, text-rightuntuk perataan kanan dan text-justifyuntuk perataan yang benar.

Bootstrap adalah kerangka kerja frontend yang sangat sederhana untuk dikerjakan, begitu Anda menggunakannya. Serta sangat mudah untuk menyesuaikan agar sesuai dengan keinginan Anda.


3

Kami memiliki lima kelas untuk itu, yang dapat Anda rujuk dari sini: 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>


3

Inilah solusi paling sederhana

Anda dapat menetapkan kelas-kelas seperti pusat teks, kiri atau kanan. Teks akan sesuai dengan kelas-kelas ini. Anda tidak harus membuat kelas secara terpisah. Kelas-kelas ini inbuilt di BootStrap 3

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

Periksa di sini: Demo


1
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
Teks rata kiri di viewports berukuran MD (sedang) atau lebih lebar.

Teks rata kiri di viewports berukuran LG (besar) atau lebih lebar.

Teks rata kiri di viewport berukuran XL (ekstra besar) atau lebih lebar.


1

Dalam Bootstrap versi 4. Ada beberapa kelas bawaan untuk memposisikan teks.

Untuk header tabel keterpusatan dan teks data:

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

Anda juga dapat menggunakan kelas ini untuk memposisikan teks apa pun.

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

Untuk lebih jelasnya

Semoga ini bisa membantu Anda.


0

Dalam tiga kelas ini Bootstrap kelas tidak valid

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

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

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

5
Sudah ada beberapa jawaban berkualitas tinggi untuk pertanyaan ini, yang sebagian besar diposkan tiga tahun lalu ketika pertanyaan diajukan. Meskipun mungkin merupakan latihan yang bermanfaat untuk mencoba menjawab pertanyaan-pertanyaan sederhana seperti ini untuk meningkatkan kemampuan pemrograman Anda, memposting jawaban ini dalam keadaan saat ini tidak menambah apa pun pada pertanyaan. Jika ada sesuatu yang baru tentang jawaban Anda, silakan ambil beberapa kalimat untuk menjelaskan perbedaannya dan mengapa itu membuatnya lebih baik.
MTCoster

Apa yang Anda maksud dengan "Dalam tiga kelas Bootstrap kelas tidak valid" ? Bisakah Anda menguraikan? Khususnya, untuk "kelas tidak valid" .
Peter Mortensen

0

Gunakan text-align:center !important. Mungkin ada text-alignaturan css lain sehingga !importantini penting.

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>

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.