[html] 표 셀에서 확인란을 중앙에 배치하는 방법은 무엇입니까?

셀에는 확인란 만 포함되어 있습니다. 표 머리글 행의 텍스트 때문에 다소 넓습니다. 확인란을 중앙에 배치하려면 어떻게해야합니까 (HTML에 인라인 CSS가 있습니까? (알고 있습니다)).

나는 시도했다

 <td>
      <input type="checkbox" name="myTextEditBox" value="checked"
      style="margin-left:auto; margin-right:auto;">
 </td>

그러나 그것은 작동하지 않았습니다. 내가 뭘 잘못하고 있죠?

업데이트 : 여기에 테스트 페이지가 있습니다. 누군가가 HTML의 CSS 인라인을 사용하여 확인란이 열 중앙에 오도록 수정할 수 있습니까?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Alignment test</title>
</head>
<body>

<table style="empty-cells:hide; margin-left:auto; margin-right:auto;" border="1"   cellpadding="1" cellspacing="1">

  <tr>
    <th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
  </tr>

  <tr>
    <td>
        <input type="checkbox" name="query_myTextEditBox" style="text-align:center; vertical-align: middle;">
    </td>

    <td>
      myTextEditBox
    </td>

    <td>
       <select size ="1" name="myTextEditBox_compare_operator">
        <option value="=">equals</option>
        <option value="<>">does not equal</option>
       </select>
    </td>

    <td>
      <input type="text" name="myTextEditBox_compare_value">
    </td>

    <td>
      <input type="checkbox" name="report_myTextEditBox" value="checked" style="text-align:center; vertical-align: middle;">
    </td>

  </tr>

</table>


</body>
</html>

@Hristo의 답변을 수락했으며 여기에는 인라인 형식이 있습니다 …

<table style="empty-cells:hide;" border="1"   cellpadding="1" cellspacing="1">

    <tr>
        <th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
    </tr>

    <tr>
        <td style="text-align: center; vertical-align: middle;">
            <input type="checkbox" name="query_myTextEditBox">
        </td>

        <td>
            myTextEditBox
        </td>

        <td>
            <select size ="1" name="myTextEditBox_compare_operator">
                <option value="=">equals</option>
                <option value="<>">does not equal</option>
            </select>
        </td>

        <td>
            <input type="text" name="myTextEditBox_compare_value">
        </td>

        <td style="text-align: center; vertical-align: middle;">
            <input type="checkbox" name="report_myTextEditBox" value="checked">
        </td>

    </tr>

</table>

답변

최신 정보

이건 어때 … http://jsfiddle.net/gSaPb/

jsFiddle에서 내 예제를 확인하십시오 : http://jsfiddle.net/QzPGu/

HTML

<table>
  <tr>
    <td>
      <input type="checkbox" name="myTextEditBox" value="checked" /> checkbox
    </td>
  </tr>
</table>

CSS

td {
  text-align: center; /* center checkbox horizontally */
  vertical-align: middle; /* center checkbox vertically */
}
table {
  border: 1px solid;
  width: 200px;
}
tr {
  height: 80px;
}

이게 도움이 되길 바란다.

답변

시험

<td style="text-align:center;">
  <input type="checkbox" name="myTextEditBox" value="checked" />
</td>

답변

이것을 시도하면 작동합니다.

td input[type="checkbox"] {
    float: left;
    margin: 0 auto;
    width: 100%;
}

답변

이것은 작동합니다. 나는 그것을 사용하고 있습니다.

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>

답변

td 요소를 동적으로 작성하고 td 스타일에 직접 의존하지 않습니다.

  <td>
     <div style="text-align: center;">
         <input  type="checkbox">
     </div>
  </td>

답변

모든 인라인 CSS를 꺼내 머리로 옮깁니다. 그런 다음 셀에서 클래스 를 사용 하여 원하는대로 모든 것을 조정할 수 있습니다 ( “center”와 같은 이름을 사용하지 마십시오. 지금부터 6 개월 후에 왼쪽으로 변경할 수 있습니다 …). 정렬 대답은 여전히 동일 <td>합니다. 확인란 이 아닌 확인란에 적용 하십시오 (수표를 중앙에 배치합니다 :-))

코드 사용 중 …

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Alignment test</title>
<style>
table { margin:10px auto; border-collapse:collapse; border:1px solid gray; }
td,th { border:1px solid gray; text-align:left; padding:20px; }
td.opt1 { text-align:center; vertical-align:middle; }
td.opt2 { text-align:right; }
</style>
</head>
<body>

<table>

      <tr>
        <th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
      </tr>
      <tr>
        <td class="opt1"><input type="checkbox" name="query_myTextEditBox"></td>
        <td>
          myTextEditBox
        </td>
        <td>
           <select size ="1" name="myTextEditBox_compare_operator">
            <option value="=">equals</option>
            <option value="<>">does not equal</option>
           </select>
        </td>
        <td><input type="text" name="myTextEditBox_compare_value"></td>
        <td class="opt2">
          <input type="checkbox" name="report_myTextEditBox" value="checked">
        </td>
      </tr>
    </table>
    </body>
    </html>

답변

레거시 브라우저를 지원하지 않는 경우 잘 지원 되고 대부분의 레이아웃 문제를 간단히 해결할 수 flexbox있기 때문에 사용 하겠습니다.

#table-id td:nth-child(1) { 
    /* nth-child(1) is the first column, change to fit your needs */
    display: flex;
    justify-content: center;
}

이렇게하면 모든 콘텐츠 <td>가 모든 행 의 첫 번째 중앙 에 배치됩니다.