menyelaraskan tepat di sel tabel dengan CSS

128

Saya memiliki kode klasik lama seperti ini

<td align="right">

yang melakukan apa yang dikatakannya: itu benar menyelaraskan konten di dalam sel. Jadi jika saya meletakkan 2 tombol di sel ini, mereka akan muncul di situs yang tepat sel.

Tapi kemudian saya refactoring ini ke CSS, tetapi tidak ada yang namanya align kanan? Saya melihat perataan teks, apakah itu sama?

css

— Michel
sumber

154

Menggunakan

text-align: right

Properti CSS penyelarasan teks menjelaskan bagaimana konten inline seperti teks disejajarkan dalam elemen blok induknya. text-align tidak mengontrol perataan elemen blok itu sendiri, hanya konten inline mereka.

Lihat

perataan teks

<td class='alnright'>text to be aligned to right</td>

<style>
    .alnright { text-align: right; }
</style>

— rahul
sumber

5

itu adalah <input type = "button"> elemen blok karena elemen itu tidak selaras kan?

— Michel

1

Tergantung. Saya memiliki paragraf, yang merupakan blok, di dalam sel tabel (css display: table-cell), dan jika saya memberikan paragraf lebar 100% itu mulai menghormati teks-align kanan. Saya menganggap mendefinisikan lebar tidak selalu yang terbaik.

— Costa

3

Saya ambil kemudian, bahwa properti text-aligntidak sangat baik dinamai jika itu berlaku untuk tombol dan kontrol serta teks. Mungkin ini seharusnya dipanggil content-align?

— Ben

3

Michel: atur elemen blok ke inline-block, mis .: td input {display: inline-block; }

— shalamos

1

atau saya hanya bekerja float: kanan atau align lama yang baik = "benar". wtf?

— Nada Sodaoda

7

Apa yang berhasil bagi saya sekarang adalah:

CSS:

.right {
  text-align: right;
  margin-right: 1em;
}

.left {
  text-align: left;
  margin-left: 1em;
}

HTML:

<table width="100%">
  <tbody>
    <tr>
      <td class="left">
        <input id="abort" type="submit" name="abort" value="Back">
        <input id="save" type="submit" name="save" value="Save">
      </td>
      <td class="right">
        <input id="delegate" type="submit" name="delegate" value="Delegate">
        <input id="unassign" type="submit" name="unassign" value="Unassign">
        <input id="complete" type="submit" name="complete" value="Complete">
      </td>
    </tr>
  </tbody>
</table>

Lihat biola berikut:

http://jsfiddle.net/Joysn/3u3SD/

— Joysn
sumber

6

Jangan lupa tentang pemilih 'nth-child' CSS3. Jika Anda tahu indeks kolom yang ingin Anda selaraskan teks ke kanan, Anda bisa menentukan

table tr td:nth-child(2) {
    text-align: right;
}

Dalam kasus dengan tabel besar ini dapat menghemat banyak markup tambahan!

inilah biola untukmu .... https://jsfiddle.net/w16c2nad/

— Suite 404 tidak ditemukan
sumber

Hebat: solusi termudah dan terbersih yang saya lihat.

— ncrypticus

2

Cara memposisikan elemen blok dalam `td`sel

Jawaban yang diberikan berfungsi dengan baik untuk meluruskan teks dalam tdsel.

Ini mungkin bukan solusi ketika Anda ingin menyelaraskan elemen blok seperti yang dikomentari dalam jawaban yang diterima. Untuk mencapainya dengan elemen blok, saya merasa berguna untuk menggunakan margin;

sintaksis umum

selector {
  margin: top right bottom left;
}

dibenarkan benar

td {
  /* there is a shorthand, TODO! 🙂 */
  margin: auto 0 auto auto;
}

pusat pembenaran

td {
  margin: auto auto auto auto;
}

/* or the short-hand */
margin: auto;

sejajarkan pusat

td {
  margin: auto;
}

Contoh JS Fiddle

Atau, Anda dapat membuat tdkonten Anda ditampilkan inline-blockjika itu suatu opsi, tetapi itu dapat mengubah posisi elemen turunannya.

— John Mutuma
sumber