allinea a destra in una cella di tabella con CSS

128

Ho il vecchio codice classico come questo

<td align="right">

che fa quello che dice: allinea correttamente il contenuto nella cella. Quindi, se inserisco 2 pulsanti in questa cella, appariranno nel sito giusto della cella.

Ma poi stavo eseguendo il refactoring di questo al CSS, ma non esiste un allineamento corretto? Vedo text-align, è lo stesso?

css

— Michel
fonte

154

Uso

text-align: right

La proprietà CSS text-align descrive come il contenuto incorporato come text è allineato nel suo elemento di blocco parent. text-align non controlla l'allineamento degli elementi del blocco stesso, ma solo il loro contenuto incorporato.

Vedere

text-align

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

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

— Rahul
fonte

5

è un <input type = "button"> un elemento a blocchi perché quello non viene allineato giusto?

— Michel,

1

Dipende. Ho un paragrafo, che è un blocco, all'interno di una cella di tabella (display css: tabella-cella), e se do a quel paragrafo una larghezza del 100%, inizia a rispettare l'allineamento del testo a destra. Presumo che definire una larghezza non sia sempre la cosa migliore.

— Costa

3

Presumo quindi che la proprietà text-alignnon abbia un nome molto valido se si applica a pulsanti e controlli, nonché al testo. Forse questo avrebbe dovuto essere chiamato content-align?

— Ben,

3

Michel: imposta l'elemento di blocco su blocco inline, ad esempio: td input {display: inline-block; }

— shalamos,

1

o io funziona solo float: right o good old align = "right". wtf?

— Tone Škoda,

7

Ciò che ha funzionato per me ora è:

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>

Vedi il seguente violino:

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

— Joysn
fonte

6

Non dimenticare il selettore 'nth-child' di CSS3. Se conosci l'indice della colonna che desideri allineare il testo a destra, puoi semplicemente specificare

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

In casi con tavoli di grandi dimensioni questo può farti risparmiare un sacco di markup extra!

ecco un violino per te .... https://jsfiddle.net/w16c2nad/

— Suite 404 non trovata
fonte

Fantastico: la soluzione più semplice e pulita che ho visto.

— ncrypticus,

2

Come posizionare elementi a blocchi in una `td`cella

Le risposte fornite fanno un ottimo lavoro per allineare il testo a destra in una tdcella.

Questa potrebbe non essere la soluzione quando stai cercando di allineare un elemento a blocchi come commentato nella risposta accettata. Per ottenere ciò con un elemento a blocchi, ho trovato utile fare uso dei margini;

sintassi generale

selector {
  margin: top right bottom left;
}

giustificare giusto

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

giustificare il centro

td {
  margin: auto auto auto auto;
}

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

allinea al centro

td {
  margin: auto;
}

Esempio di JS Fiddle

In alternativa, potresti farti tdvisualizzare il contenuto inline-blockse questa è un'opzione, ma ciò potrebbe distorcere la posizione dei suoi elementi figlio.

— John Mutuma
fonte