CSS를 사용하여 표 셀에서 오른쪽 정렬

나는 이와 같은 오래된 고전적인 코드를 가지고있다.

<td align="right">

셀의 내용을 올바르게 정렬합니다. 이 셀에 2 개의 버튼을 넣으면 셀의 오른쪽 사이트에 버튼이 나타납니다.

그러나 CSS로 리팩토링했지만 오른쪽 정렬과 같은 것은 없습니다. 텍스트 정렬이 표시됩니다. 동일합니까?

사용하다

text-align: right

텍스트 정렬 CSS 속성은 텍스트와 같은 인라인 내용이 부모 블록 요소에서 정렬되는 방식을 설명합니다. text-align은 블록 요소 자체의 정렬을 제어하지 않으며 인라인 내용 만 제어합니다.

보다

텍스트 정렬

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

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

지금 나를 위해 일한 것은 다음과 같습니다.

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>

다음 바이올린을 참조하십시오.

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

CSS3의 'n-child'셀렉터를 잊지 마십시오. 텍스트를 오른쪽에 맞추려는 열의 색인을 알고 있다면 지정할 수 있습니다.

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

큰 테이블이있는 경우 추가 마크 업을 많이 절약 할 수 있습니다!

여기에 바이올린이 있습니다 .... https://jsfiddle.net/w16c2nad/

td셀에 블록 요소를 배치하는 방법

제공된 답변은 td셀 에서 텍스트를 오른쪽 정렬하는 데 큰 도움이됩니다 .

허용 된 답변에 언급 된대로 블록 요소를 정렬하려고 할 때 해결책이 아닐 수도 있습니다. 블록 요소로이를 달성하기 위해 여백을 사용하는 것이 유용하다는 것을 알았습니다.

일반적인 문법

selector {
  margin: top right bottom left;
}

정당화하다

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

센터를 정당화하다

td {
  margin: auto auto auto auto;
}

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

가운데 정렬

td {
  margin: auto;
}

JS 피들 예제

또는 옵션 인 경우 td콘텐츠를 표시 할 수 inline-block있지만 하위 요소의 위치가 왜곡 될 수 있습니다.