CSS ile bir tablo hücresinde sağa hizala

128

Bunun gibi eski klasik koda sahibim

<td align="right">

dediğini yapan: hücredeki içeriği doğru hizalar. Yani bu hücreye 2 düğme koyarsam, hücrenin doğru yerinde görünecekler.

Ama sonra bunu CSS'ye yeniden biçimlendiriyordum, ancak doğru hizalama diye bir şey yok? Metin hizalama görüyorum, bu aynı mı?

css

— Michel
kaynak

154

kullanım

text-align: right

Metin hizalama CSS özelliği, metin gibi satır içi içeriğin üst blok öğesinde nasıl hizalandığını açıklar. metin hizalama, blok öğelerinin kendi hizalamasını kontrol etmez, yalnızca satır içi içeriğini kontrol eder.

Görmek

Metin hizalama

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

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

— rahul
kaynak

5

doğru hizalanmadığı için bir <input type = "button"> blok öğesi mi?

— Michel

1

Değişir. Bir tablo hücresinin içinde blok olan bir paragrafım var (css display: table-cell) ve bu paragrafa% 100 genişlik verirsem, metne doğru hizalamaya uymaya başlar. Bir genişliği tanımlamanın her zaman en iyi şey olmadığını varsayıyorum.

— Costa

3

Öyleyse, text-alignmetnin yanı sıra düğmeler ve kontroller için geçerliyse , özelliğin çok iyi adlandırılmadığını anlıyorum. Belki de buna çağrılmalıydı content-align?

— Ben

3

Michel: blok elemanını satır içi bloğa ayarlayın, örneğin: td input {display: inline-block; }

— shalamos

1

ya da ben sadece float: sağ ya da eski hizala = "sağ" çalışır. o ne lan ?

— Tone Škoda

7

Şimdi benim için işe yarayan şey:

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>

Şu kemana bakın:

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

— Joysn
kaynak

6

CSS3'ün "nth-child" seçicisini unutmayın. Metni sağa hizalamak istediğiniz sütunun dizinini biliyorsanız, sadece şunu belirtebilirsiniz:

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

Büyük tabloların olduğu durumlarda, bu size çok fazla ek işaretleme tasarrufu sağlayabilir!

işte size bir keman ... https://jsfiddle.net/w16c2nad/

— Suite 404 bulunamadı
kaynak

Harika: gördüğüm en kolay ve en temiz çözüm.

— ncrypticus

2

Blok elemanlarını bir `td` hücrede

Sağlanan yanıtlar, metni bir td hücredeki .

Kabul edilen cevapta açıklandığı gibi bir blok öğesini hizalamak istediğinizde bu çözüm olmayabilir. Bunu bir blok elemanla başarmak için, kenar boşluklarından yararlanmayı yararlı buldum;

genel sözdizimi

selector {
  margin: top right bottom left;
}

sağa yaslamak

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

merkeze yasla

td {
  margin: auto auto auto auto;
}

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

Merkezi hizalama

td {
  margin: auto;
}

JS Fiddle örneği

Alternatif olarak, eğer bu bir seçenekse tdiçeriğin görüntülenmesini inline-blocksağlayabilirsiniz, ancak bu, alt öğelerinin konumunu bozabilir.

— John Mutuma
kaynak