如何使用components.css水平对齐<div>？

Question

我使用components.css来设计此部分的样式。

我试图在<div>内水平对齐<td>。看：

<td>
    <div class="md-checkbox">
        <input type="checkbox" id="checkbox1)" class="md-check checkboxes" value="147">
        <label for="checkbox1">
            <span></span>
            <span class="check"></span>
            <span class="box"></span>
        </label>
    </div>
</td>

我看到<div>与class="md-checkbox"正在填满所有单元格。我试图减少width（使用!important），但它没有效果：

我该如何解决这个问题？

Answer 1

试试这个

<table>
<tr>
  <td>
    <div class="md-checkbox">
        <input type="checkbox" id="checkbox1)" class="md-check checkboxes" value="147">
        <label for="checkbox1">
            <span></span>
            <span class="check"></span>
            <span class="box"></span>
        </label>
    </div>
</td>
</tr>
</table>

CSS

td {
  width: 100px;
  background-color: blue;
  text-align: center;
}

.md-checkbox {
  dipslay: inline-block;
}

Answer 2

我在代码中为div元素提供了内联样式，如下所示，

 <div class="md-checkbox" style="width:10px">

减小宽度。即使我尝试使用css文件更改宽度。这种方法也有效。

Answer 3

寻找components.css的css我用这个来解决：

.md-checkbox label {
    position: relative;
    margin-left: 9px; 
    margin-bottom: 15px;
}