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

100

셀에는 확인란 만 포함되어 있습니다. 표 머리글 행의 텍스트 때문에 다소 넓습니다. 확인란을 중앙에 배치하려면 어떻게해야합니까 (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>
html  css 
— Mawg는 Monica를 복원한다고 말합니다.
소스
<td align = "center"> <input type = "checkbox"name = "myTextEditBox"value = "checked"> </ td>는 IE8,9에서 작동합니다. 그러나 IE10 또는 크롬에서는 상자가 표시되는지 여부에 관계없이 확인란 또는 라디오 상자가 상자에 정의됩니다. 상자는 항상 왼쪽 정렬됩니다. 그러나 정의 상자 안에는 확인란 또는 라디오가 중앙에 있습니다. 포함하는 TD의 너비가 100px이면 확인란은 50px이며 항상 왼쪽 정렬됩니다. 체크 박스를 중앙에 배치하려면 체크 박스의 정의 상자를 포함하는 TD와 동일한 너비 인 100px로 만들 수 있습니다.
— qeq

답변:

111

최신 정보

이건 어때 ... 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;   
}

이게 도움이 되길 바란다.

— Hristo
소스
2
+1 감사합니다.하지만 제 예에서는 작동하지 않는 것 같습니다. 업데이트 된 질문을 참조하십시오
— Mawg 모니카 복원 말한다
+1 작동합니다. 위의 인라인 형식으로 업데이트 된 코드를 게시했습니다. 지금은 그냥 일을하게 차이에서 비교 및 그림 일부 파일을 할 필요가, 감사합니다.
— Mawg는 분석 재개 모니카 말한다
닫았지만 내 부트 스트랩 -4 테이블에서 약간 벗어난 것 같습니다. 열 머리글은 확실히 가운데에 있지만 확인란은 가운데 약간 왼쪽에 있습니다
— Addison Klinke
27

시험

<td style="text-align:center;">
  <input type="checkbox" name="myTextEditBox" value="checked" />
</td>
— 앤드류 마샬
소스
+1 감사합니다.하지만 제 예에서는 작동하지 않는 것 같습니다. 업데이트 된 질문을 참조하십시오
— Mawg 모니카 복원 말한다
1
방금 Chrome 9에서 내 솔루션을 사용하여 업데이트 된 코드를 테스트했는데 작동합니다.
— Andrew Marshall
+1 MS IE 및 FireFox에서 작동하고 여기에 코드를 게시하면 답은 귀하의 것입니다.
— Mawg는 분석 재개 모니카 말한다
23

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

td input[type="checkbox"] {
    float: left;
    margin: 0 auto;
    width: 100%;
}
— 프라 바카 란 S
소스
10

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

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
— Miloš
소스
1
@Gerard, 누가 여기서 HTML5에 대해 이야기하고 있습니까?
— Miloš 2013 년
5

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

  <td>
     <div style="text-align: center;">
         <input  type="checkbox">
     </div>
  </td>
— 카를로스 E
소스
<div>보다는 오히려 <span>일까요?
— Mawg는
1
div는 블록 요소입니다. 기본 표시 값은 "블록"입니다. 스팬을 사용하면 왼쪽에서 입력이 계속됩니다. 차이를 확인하는 테스트
— Carlos E
미래에 다른 사람들에게 도움이 될 좋은 설명 (+1) 탑승을 환영합니다
— Mawg는 Monica를 복원한다고
4

모든 인라인 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>
— 도슨
소스
2
잊지 마세요 ... a td는 "특별한"종류의 요소입니다. 그것은 블록 및 인라인 결혼 (지옥에서)과 같은 고유 한 행동을 가지고 있습니다.
— Dawson
3

레거시 브라우저를 지원하지 않는 경우 잘 지원 되고 대부분의 레이아웃 문제를 간단히 해결할 수 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>가 모든 행 의 첫 번째 중앙 에 배치됩니다.

— 릭 스미스
소스
1

check 요소의 float 속성을 none으로 정의합니다.

float: none;

그리고 부모 요소를 가운데에 놓습니다.

text-align: center;

그것은 나를 위해 일하는 유일한 것입니다.

— 플라 스토 니코
소스
상속 된 "float : left;" 나를 위해 그것을 망치고 있었다. "float : none"으로 설정하면 문제가 해결되었습니다.
— jornhd
0 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered">
  <thead>
    <tr>
      <th></th>
      <th class="text-center">Left</th>
      <th class="text-center">Center</th>
      <th class="text-center">Right</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        <span>Bootstrap (class="text-left")</span>
      </th>
      <td class="text-left">
        <input type="checkbox" />
      </td>
      <td class="text-center">
        <input type="checkbox" checked />
      </td>
      <td class="text-right">
        <input type="checkbox" />
      </td>
    </tr>
    <tr>
      <th>
        <span>HTML attribute (align="left")</span>
      </th>
      <td align="left">
        <input type="checkbox" />
      </td>
      <td align="center">
        <input type="checkbox" checked />
      </td>
      <td align="right">
        <input type="checkbox" />
      </td>
    </tr>
  </tbody>
</table>
스 니펫 확장

— 세르게이
소스
-2

당신이 있는지 확인 <td>하지 않습니다display: block;

플로팅이이 작업을 수행하지만 다음과 같이하는 것이 훨씬 쉽습니다. display: inline;

— Askrich
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.