टेबल सेल में एक चेकबॉक्स कैसे केंद्रित करें?

100

सेल में एक चेकबॉक्स के अलावा कुछ भी नहीं है। टेबल हेडर पंक्ति में पाठ के कारण यह अधिक विस्तृत है। मैं अपने HTML में चेकबॉक्स (इनलाइन सीएसएस के साथ) को कैसे केंद्र करूं? (मुझे पता है)

मैंने कोशिश की 

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

मैंने @ हिस्त्रो के उत्तर को स्वीकार कर लिया है - और यह इनलाइन फॉर्मेटिंग के साथ है ... 

<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" नाम = "myTextEditBox" value = "check"> </ td> यह IE8,9 में काम करेगा। हालांकि IE10 या क्रोम में, चेकबॉक्स या रेडियोबॉक्स को एक बॉक्स में परिभाषित किया गया है, चाहे आप बॉक्स को देखें या नहीं। बॉक्स हमेशा संरेखित रहेगा। लेकिन परिभाषित बॉक्स के अंदर, चेकबॉक्स या रेडियो केंद्रित है। यदि युक्त टीडी की चौड़ाई 100px है, तो चेकबॉक्स 50px है, तो इसे हमेशा संरेखित किया जाता है। चेकबॉक्स को केंद्र में रखने के लिए, आप चेक्सबॉक्स के डिफाइनिंग बॉक्स को 100px कर सकते हैं, जो कि TD की समान चौड़ाई है।
— 18

जवाबों:

111

अपडेट करें

यह कैसे ... http://jsfiddle.net/gSaPb/

JsFiddle पर मेरा उदाहरण देखें: http://jsfiddle.net/QzPGu/

एचटीएमएल

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

सीएसएस

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

आशा है कि ये आपकी मदद करेगा।

— ह्रिस्टो
स्रोत
2
+1 धन्यवाद, लेकिन यह मेरे उदाहरण में काम नहीं करता है। कृपया अद्यतन किया गया प्रश्न देखें
— मावग का कहना है कि मोनिका
+1 यह काम करता है। मैंने अद्यतन कोड पोस्ट किया है - इनलाइन फ़ॉर्मेटिंग के साथ - ऊपर। अब मुझे बस कुछ फ़ाइल की तुलना करनी है और उस अंतर का पता लगाना है जो इसे काम करता है। धन्यवाद,
— मावग का कहना है कि मोनिका
बंद करें, लेकिन मेरे बूटस्ट्रैप -4 तालिका के साथ थोड़ा बंद लगता है। कॉलम हेडर निश्चित रूप से केंद्रित है, लेकिन चेकबॉक्स केंद्र से थोड़ा सा बचा है
— एडिसन किलिं जूल
27

प्रयत्न

<td style="text-align:center;">
  <input type="checkbox" name="myTextEditBox" value="checked" />
</td>
— एंड्रयू मार्शल
स्रोत
+1 धन्यवाद, लेकिन यह मेरे उदाहरण में काम नहीं करता है। कृपया अद्यतन किया गया प्रश्न देखें
— मावग का कहना है कि मोनिका
1
मैंने अभी Chrome 9 में अपने समाधान का उपयोग करके आपके अपडेट किए गए कोड का परीक्षण किया है और यह काम करता है।
— एंड्रयू मार्शल
+1 यदि यह MS IE और FireFox में काम करता है और आप यहां कोड पोस्ट करते हैं, तो उत्तर आपका है।
— मावग का कहना है कि मोनिका
10

यह काम करना चाहिए, मैं इसका उपयोग कर रहा हूं:

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
— मायलॉस
स्रोत
1
@Gerard, यहाँ HTML5 के बारे में कौन बात कर रहा है?
— मिलो
5

गतिशील लेखन td तत्वों के लिए और td शैली पर सीधे भरोसा न करें

  <td>
     <div style="text-align: center;">
         <input  type="checkbox">
     </div>
  </td>
— कार्लोस ई
स्रोत
हो सकता है कि बजाय <span> <div> से?
— मावग का कहना है कि
1
div एक ब्लॉक-एलिमेंट है; इसका डिफ़ॉल्ट प्रदर्शन मूल्य "ब्लॉक" है। अवधि के साथ, इनपुट बाईं ओर जारी रहता है। अंतर देखने के लिए टेस्ट
— कार्लोस ई
एक अच्छी व्याख्या, जो भविष्य में दूसरों की मदद करेगी (+1) आपका स्वागत है
— मावग का कहना है कि मोनिका
4

अपने सभी इन-लाइन सीएसएस को बाहर निकालें , और इसे सिर पर ले जाएं। तब कोशिकाओं पर कक्षाओं का उपयोग करें ताकि आप अपनी पसंद के अनुसार सब कुछ समायोजित कर सकें ("केंद्र" जैसे नाम का उपयोग न करें - आप इसे अभी से 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
मत भूलना ... ए 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

चेक तत्व की फ्लोट संपत्ति को किसी में भी परिभाषित न करें:

float: none;

और मूल तत्व को केन्द्रित करें:

text-align: center;

मेरे लिए यही एकमात्र काम था।

— Plastónico
स्रोत
एक विरासत में मिली "फ्लोट: बाएं;" मेरे लिए इसे बर्बाद कर रहा था। "फ्लोट: कोई नहीं" सेट करना।
— 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
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.