チェックボックスをテーブルセルの中央に配置する方法は？

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 
— モニカはモニカを復活させると言う
ソース
<td align = "center"> <input type = "checkbox" name = "myTextEditBox" value = "checked"> </ td>を使用すると、IE8,9で機能します。ただし、IE10またはChromeでは、ボックスが表示されているかどうかに関係なく、チェックボックスまたはラジオボックスはボックスで定義されます。ボックスは常に左揃えになります。ただし、定義ボックス内では、チェックボックスまたはラジオが中央に配置されます。含むTDの幅が100pxの場合、チェックボックスは50pxであり、常に左揃えになります。チェックボックスを中央に配置するには、チェックボックスの定義ボックスを100pxにします。これは、含まれているTDと同じ幅です。
— qeq 2017年

回答:

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;   
}

これがお役に立てば幸いです。

— フリスト
ソース
2
+1ありがとうございます、しかし私の例ではうまくいかないようです。更新された質問を参照してください
— Mawgはモニカを
+1効果があります。上記のインラインフォーマットを使用して、更新されたコードを投稿しました。今、私はちょうどそれが仕事になり違いからいくつかのファイルを比較＆フィギュアを行う必要があり、感謝。
— MawgはREINSTATEモニカ言う
近いですが、bootstrap-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で機能し、ここにコードを投稿した場合、答えはあなたのものです。
— モーグはモニカを
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>
— ミロシュ
ソース
1
@ Gerard、HTML5についてここで話しているのは誰ですか？
— ミロシュ2013年
5

動的なtd要素を記述し、tdスタイルに直接依存しない場合

  <td>
     <div style="text-align: center;">
         <input  type="checkbox">
     </div>
  </td>
— カルロスE
ソース
多分<div>よりも<span>？
— Mawgはモニカを2017
1
divはブロック要素です。デフォルトの表示値は「ブロック」です。スパンを使用すると、入力は左側から続行されます。違いを確認するためのテスト
— カルロスE
良い説明、将来的に他の人を助ける（+1）Welcome
— on
4

インラインCSSをすべて引き出し、先頭に移動します。次に、セルのクラスを使用して、好きなようにすべてを調整できるようにします（「center」のような名前は使用しないでください-今から6か月後に左に変更できます...）。整列の答えは同じです- <td>チェックボックスのNOTに適用します（チェックを中央に配置します:-)）

コードを使用しています...

<!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は「特別な」種類の要素です。それはそれ自身のユニークな振る舞いを持っています-ブロックとインライン結婚のようなものです（地獄から）。
— ドーソン、
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.