Wie zentriere ich ein Kontrollkästchen in einer Tabellenzelle?

100

Die Zelle enthält nur ein Kontrollkästchen. Es ist aufgrund des Textes in der Tabellenkopfzeile ziemlich breit. Wie zentriere ich das Kontrollkästchen (mit Inline-CSS in meinem HTML? (Ich weiß))

Ich habe es versucht 

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

aber das hat nicht funktioniert. Was mache ich falsch?

Update: Hier ist eine Testseite. Kann jemand es bitte korrigieren - mit CSS inline im HTML - damit die Kontrollkästchen in ihren Spalten zentriert sind? 

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

Ich habe die Antwort von @ Hristo akzeptiert - und hier ist es mit Inline-Formatierung ... 

<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 sagt, Monica wieder einzusetzen
quelle
<td align = "center"> <input type = "checkbox" name = "myTextEditBox" value = "checked"> </ td> funktioniert in IE8,9. In IE10 oder Chrome ist das Kontrollkästchen oder die Radiobox jedoch in einem Feld definiert, unabhängig davon, ob Sie das Feld sehen oder nicht. Das Feld wird immer linksbündig ausgerichtet. Innerhalb des Definitionsfelds ist das Kontrollkästchen oder das Radio zentriert. Wenn die Breite des enthaltenen TD 100 Pixel beträgt, das Kontrollkästchen 50 Pixel beträgt, wird es immer linksbündig ausgerichtet. Um das Kontrollkästchen zu zentrieren, können Sie das Definitionsfeld der Chekbox auf 100 Pixel einstellen, was der Breite des enthaltenen TD entspricht.
— QEQ

Antworten:

111

AKTUALISIEREN

Wie wäre es damit ... http://jsfiddle.net/gSaPb/

Schauen Sie sich mein Beispiel auf jsFiddle an: 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;   
}

Ich hoffe das hilft.

— Hristo
quelle
2
+1 Danke, aber in meinem Beispiel scheint es nicht zu funktionieren. Bitte sehen Sie aktualisierte Frage
— Mawg sagt wieder Monica
+1 Das funktioniert. Ich habe den aktualisierten Code - mit Inline-Formatierung - oben veröffentlicht. Jetzt muss ich nur noch ein paar Dateien vergleichen und herausfinden,
— warum
Nah dran, scheint aber mit meinem Bootstrap-4-Tisch etwas daneben zu liegen. Die Spaltenüberschrift ist definitiv zentriert, aber das Kontrollkästchen befindet sich etwas links von der Mitte
— Addison Klinke
27

Versuchen

<td style="text-align:center;">
  <input type="checkbox" name="myTextEditBox" value="checked" />
</td>
— Andrew Marshall
quelle
+1 Danke, aber in meinem Beispiel scheint es nicht zu funktionieren. Bitte sehen Sie aktualisierte Frage
— Mawg sagt wieder Monica
1
Ich habe gerade Ihren aktualisierten Code mit meiner Lösung in Chrome 9 getestet und es funktioniert.
— Andrew Marshall
+1 Wenn es in MS IE und FireFox funktioniert und Sie den Code hier veröffentlichen, liegt die Antwort bei Ihnen.
— Mawg sagt, Monica
23

Versuchen Sie dies, dies sollte funktionieren,

td input[type="checkbox"] {
    float: left;
    margin: 0 auto;
    width: 100%;
}
— Prabhakaran S.
quelle
10

Das sollte funktionieren, ich benutze es:

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
— Miloš
quelle
1
@Gerard, wer spricht hier über HTML5?
— Miloš
5

Für dynamisches Schreiben td Elemente und nicht direkt auf den td Style verlassen

  <td>
     <div style="text-align: center;">
         <input  type="checkbox">
     </div>
  </td>
— Carlos E.
quelle
Vielleicht eher <span> als <div>?
— Mawg sagt, Monica wieder
1
div ist ein Blockelement; Der Standardanzeigewert ist "Block". Mit span wird die Eingabe links fortgesetzt. Test, um Unterschied zu sehen
— Carlos E
Eine gute Erklärung, die anderen in Zukunft helfen wird (+1) Willkommen an Bord
— Mawg sagt, Monica
4

Ziehen Sie das gesamte Inline-CSS heraus und verschieben Sie es auf den Kopf. Dann verwenden Klassen auf den Zellen , so dass Sie alles einstellen können , wie Sie möchten (keinen Namen wie „center“ verwenden - Sie können es ändern , von jetzt 6 Monate links nach ...). Die Antwort auf die Ausrichtung ist immer noch dieselbe - wenden Sie sie auf <td>das Kontrollkästchen NICHT das Kontrollkästchen an (das würde nur Ihren Scheck zentrieren :-))

Verwenden Sie Ihren Code ...

<!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
quelle
2
Vergiss nicht ... a tdist ein "besonderes" Element. Es hat seine eigenen einzigartigen Verhaltensweisen - wie eine Block- und Inline-Ehe (aus der Hölle).
— Dawson
3

Wenn Sie keine älteren Browser unterstützen, würde ich diese verwenden, flexboxda sie gut unterstützt werden und einfach die meisten Ihrer Layoutprobleme lösen.

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

Dadurch werden alle Inhalte in der ersten <td>Zeile jeder Zeile zentriert .

— Rick Smith
quelle
1

Definieren Sie die Eigenschaft float des Prüfelements auf none:

float: none;

Und zentrieren Sie das übergeordnete Element:

text-align: center;

Es war das einzige, was für mich funktioniert.

— Plastónico
quelle
Ein geerbtes "float: left;" ruinierte es für mich. Die Einstellung "float: none" hat das Problem behoben.
— 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>
Erweitern Sie das Snippet

— Sergey
quelle
-2

Stellen Sie sicher, dass dies nicht der Fall <td>istdisplay: block;

Floating wird dies tun, aber viel einfacher zu tun: display: inline;

— askrich
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.