alinhar à direita em uma célula da tabela com CSS

128

Eu tenho o código clássico antigo como este

<td align="right">

que faz o que diz: alinha corretamente o conteúdo da célula. Portanto, se eu colocar 2 botões nessa célula, eles aparecerão no site certo da célula.

Mas então eu estava refatorando isso para CSS, mas não existe o alinhamento correto? Eu vejo o alinhamento de texto, é o mesmo?

css

— Michel
fonte

154

Usar

text-align: right

A propriedade CSS de alinhamento de texto descreve como o conteúdo embutido como o texto é alinhado em seu elemento de bloco pai. O alinhamento de texto não controla o alinhamento dos elementos do bloco, apenas seu conteúdo embutido.

Vejo

alinhamento de texto

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

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

— rahul
fonte

5

é um <input type = "button"> um elemento de bloco porque esse não é alinhado, certo?

— Michel

1

Depende. Eu tenho um parágrafo, que é bloco, dentro de uma célula da tabela (css display: table-cell), e se eu der esse parágrafo uma largura de 100%, ele começará a respeitar o alinhamento de texto à direita. Suponho que definir uma largura nem sempre é a melhor coisa.

— Costa

3

Entendo, então, que a propriedade text-alignnão é muito bem nomeada se for aplicada a botões e controles, além de texto. Talvez isso devesse ter sido chamado content-align?

— 26514 Ben Ben

3

Michel: defina o elemento do bloco como bloco embutido, por exemplo: td input {display: bloco embutido; }

— shalamos 14/11/14

1

ou eu só funciona float: certo ou bom e velho align = "right". wtf?

— tons Skoda

7

O que funcionou para mim agora é:

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>

Veja o seguinte violino:

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

— Joysn
fonte

6

Não se esqueça do seletor 'nésimo filho' do CSS3. Se você conhece o índice da coluna na qual deseja alinhar o texto à direita, basta especificar

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

Nos casos com tabelas grandes, isso pode poupar muita marcação extra!

aqui está um violino para você .... https://jsfiddle.net/w16c2nad/

— Suite 404 não encontrado
fonte

Ótimo: solução mais fácil e mais limpa que vi.

— Ncrypticus

2

Como posicionar elementos de bloco em uma `td`célula

As respostas fornecidas fazem um ótimo trabalho para alinhar o texto à direita em uma tdcélula.

Essa pode não ser a solução quando você procura alinhar um elemento de bloco conforme comentado na resposta aceita. Para conseguir isso com um elemento de bloco, achei útil fazer uso de margens;

sintaxe geral

selector {
  margin: top right bottom left;
}

justificar certo

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

justificar centro

td {
  margin: auto auto auto auto;
}

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

alinhar centro

td {
  margin: auto;
}

Exemplo de JS Fiddle

Como alternativa, você pode tdexibir o conteúdo inline-blockse for uma opção, mas isso pode distorcer a posição de seus elementos filhos.

— John Mutuma
fonte