একটি টেবিল ঘরে একটি চেকবক্স কীভাবে কেন্দ্র করবেন?

Question 1

সেলে একটি চেকবক্স ছাড়া কিছুই থাকে না। সারণী শিরোনাম সারিটিতে পাঠ্যের কারণে এটি প্রশস্ত। আমি কীভাবে চেকবক্সটি কেন্দ্র করব (আমার এইচটিএমএল-এ ইনলাইন সিএসএস সহ? (আমি জানি))

আমি চেষ্টা করেছিলাম

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

কিন্তু এটি কার্যকর হয়নি। আমি কি ভুল করছি?

আপডেট: এখানে একটি পরীক্ষার পৃষ্ঠা। এইচটিএমএলে সিএসএস ইনলাইন সহ কেউ দয়া করে এটি সংশোধন করতে পারেন - যাতে চেকবক্সগুলি তাদের কলামগুলিতে কেন্দ্রীভূত হয়?

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

Question 2

হালনাগাদ

এটি সম্পর্কে কীভাবে ... http://jsfiddle.net/gSaPb/

আমার উদাহরণটি জেএসফিডেলে দেখুন: 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;   
}

আশা করি এটা কাজে লাগবে.

Question 3

চেষ্টা করুন

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

Question 4

এটি চেষ্টা করুন, এটি কাজ করা উচিত,

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

Question 5

এটি কাজ করা উচিত, আমি এটি ব্যবহার করছি:

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

Question 6

গতিশীল লেখার জন্য টিডি উপাদানগুলি এবং সরাসরি টিডি স্টাইলে নির্ভর না করে

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

Question 7

আপনার সমস্ত ইন-লাইন সিএসএস টানুন এবং এটিকে মাথায় নিয়ে যান। তারপরে কক্ষগুলিতে ক্লাসগুলি ব্যবহার করুন যাতে আপনি নিজের পছন্দ মতো সবকিছু সামঞ্জস্য করতে পারেন ("কেন্দ্র" এর মতো কোনও নাম ব্যবহার করবেন না - আপনি এখন থেকে 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>

Question 8

আপনি যদি লিগ্যাসি ব্রাউজারগুলিকে সমর্থন না করেন তবে আমি ব্যবহার করব 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>প্রতিটি সারির প্রথমটিতে সমস্ত সামগ্রীকে কেন্দ্র করে।

Question 9

চেক এলিমেন্টের ভাসমান সম্পত্তিটি কারও সাথে সংজ্ঞা দেয় না:

float: none;

এবং মূল উপাদানটি কেন্দ্র করুন:

text-align: center;

এটিই ছিল আমার পক্ষে কাজ করে।

Question 10

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

স্নিপেট প্রসারিত করুন

Question 11

আপনার <td>না তা নিশ্চিত করুনdisplay: block;

ভাসমান এটি করবে, তবে কেবল এটি করা সহজ: display: inline;