title: How to horizontally align <div> inside <td> with components.css?
body: <p>I'm using <code>components.css</code> to style this part.</p>
  
  <p>I'm trying to align a <code>&lt;div&gt;</code> horizontally inside <code>&lt;td&gt;</code>. Look:</p>
  
  <pre><code>&lt;td&gt;
      &lt;div class="md-checkbox"&gt;
          &lt;input type="checkbox" id="checkbox1)" class="md-check checkboxes" value="147"&gt;
          &lt;label for="checkbox1"&gt;
              &lt;span&gt;&lt;/span&gt;
              &lt;span class="check"&gt;&lt;/span&gt;
              &lt;span class="box"&gt;&lt;/span&gt;
          &lt;/label&gt;
      &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>I saw that the <code>&lt;div&gt;</code> with <code>class="md-checkbox"</code>, is filling up all the cells. I tried to decrease the <code>width</code> (with <code>!important</code>), but it didn't work:</p>
  
  <p><a href="https://i.stack.imgur.com/cGUr0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cGUr0.png" alt="table"></a> </p>
  
  <p>How can I solve this?</p>