Làm thế nào để căn giữa một hộp kiểm trong một ô bảng?

100

Ô không chứa gì ngoài một hộp kiểm. Nó khá rộng vì văn bản trong hàng tiêu đề bảng. Làm cách nào để căn giữa hộp kiểm (với CSS nội tuyến trong HTML của tôi? (Tôi biết))

Tôi đã thử

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

nhưng điều đó đã không hoạt động. Tôi đang làm gì sai?

Cập nhật: đây là trang thử nghiệm. Ai đó có thể vui lòng sửa nó - với CSS nội tuyến trong HTML - để các hộp kiểm được căn giữa trong các cột của chúng không?

<!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>

Tôi đã chấp nhận câu trả lời của @ Hristo - và đây là với định dạng nội tuyến ...

<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 nói hãy phục hồi Monica
nguồn

<td align = "center"> <input type = "checkbox" name = "myTextEditBox" value = "check"> </td> sẽ làm cho nó hoạt động trong IE8,9. Tuy nhiên trong IE10 hoặc chrome, hộp kiểm hoặc hộp radio được xác định trong một hộp, bất kể bạn có nhìn thấy hộp đó hay không. Hộp sẽ luôn được căn trái. Nhưng bên trong hộp xác định, hộp kiểm hoặc đài được căn giữa. Nếu chiều rộng của TD chứa là 100px, hộp kiểm là 50px, thì nó luôn được căn trái. Để căn giữa hộp kiểm, bạn có thể đặt hộp xác định của chekbox là 100px, có cùng chiều rộng của TD chứa.

— qeq

111

CẬP NHẬT

Còn điều này thì sao ... http://jsfiddle.net/gSaPb/

Kiểm tra ví dụ của tôi trên 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;   
}

Tôi hi vọng cái này giúp được.

— Hristo
nguồn

2

+1 Cảm ơn, nhưng nó dường như không hoạt động trong ví dụ của tôi. Hãy xem câu hỏi được cập nhật

— Mawg nói phục hồi lại Monica

+1 Điều đó hoạt động. Tôi đã đăng mã cập nhật - với định dạng nội tuyến - ở trên. Bây giờ tôi chỉ phải làm một số tập tin so sánh & con số ra sự khác biệt mà làm cho nó hoạt động, Cảm ơn bạn.

— Mawg nói Khôi phục Monica

Đóng, nhưng có vẻ hơi lệch với bảng bootstrap-4 của tôi. Tiêu đề cột chắc chắn được căn giữa, nhưng hộp kiểm ở bên trái một chút ở giữa

— Addison Klinke

27

Thử

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

— Andrew Marshall
nguồn

+1 Cảm ơn, nhưng nó dường như không hoạt động trong ví dụ của tôi. Hãy xem câu hỏi được cập nhật

— Mawg nói phục hồi lại Monica

1

Tôi vừa kiểm tra mã cập nhật của bạn bằng giải pháp của tôi trong Chrome 9 và nó hoạt động.

— Andrew Marshall

+1 Nếu nó hoạt động trong MS IE và FireFox và bạn đăng mã ở đây, thì câu trả lời là của bạn.

— Mawg nói hãy phục hồi Monica vào

23

Hãy thử cái này, cái này sẽ hoạt động,

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

— Prabhakaran S
nguồn

10

Điều này sẽ hoạt động, tôi đang sử dụng nó:

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

— Miloš
nguồn

1

@Gerard, ai đang nói về HTML5 ở đây?

— Miloš

5

Đối với các phần tử td viết động và không dựa trực tiếp vào Kiểu td

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

— Carlos E
nguồn

Có thể là <span> chứ không phải <div>?

— Mawg nói hãy phục hồi Monica

1

div là một phần tử khối; giá trị hiển thị mặc định của nó là “khối”. Với span, đầu vào tiếp tục ở bên trái. Kiểm tra để thấy sự khác biệt

— Carlos E

Một lời giải thích tốt, mà sẽ giúp đỡ người khác trong tương lai (1) Chào mừng bạn

— Mawg nói Khôi phục Monica

4

Rút TẤT CẢ CSS nội dòng của bạn và chuyển nó vào phần đầu. Sau đó, sử dụng các lớp trên các ô để bạn có thể điều chỉnh mọi thứ theo ý muốn (không sử dụng tên như "center" - bạn có thể đổi thành bên trái sau 6 tháng kể từ bây giờ ...). Câu trả lời về căn chỉnh vẫn giống nhau - áp dụng nó vào <td>hộp kiểm KHÔNG PHẢI (điều đó sẽ chỉ căn giữa kiểm tra của bạn :-))

Sử dụng mã của bạn ...

<!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>

— Dawson
nguồn

2

Đừng quên ... a tdlà một loại nguyên tố "đặc biệt". Nó có những hành vi độc đáo của riêng nó - như một khối và hôn nhân trong dòng (từ địa ngục).

— Dawson

3

Nếu bạn không hỗ trợ các trình duyệt cũ, tôi sẽ sử dụng flexboxvì nó được hỗ trợ tốt và đơn giản sẽ giải quyết hầu hết các vấn đề về bố cục của bạn.

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

Điều này tập trung tất cả nội dung vào đầu tiên <td>của mỗi hàng.

— Rick Smith
nguồn

1

Xác định thuộc tính float của phần tử kiểm tra thành không:

float: none;

Và căn giữa phần tử cha:

text-align: center;

Nó là duy nhất làm việc cho tôi.

— Plastónico
nguồn

Một kế thừa "float: left;" đã làm hỏng nó cho tôi. Cài đặt "float: none" đã sửa nó.

— 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>

Mở rộng đoạn mã

— Sergey
nguồn

-2

Hãy chắc chắn rằng bạn <td>khôngdisplay: block;

Việc thả nổi sẽ làm được điều này, nhưng dễ dàng hơn nhiều chỉ cần: display: inline;

— askrich
nguồn