css - 复选框顶部的居中标签

Question

寻找顶部带有(居中)标签的复选框示例:

 IamALabel  
    [ ]

如果重要的话，我正在使用 (ASP.NET) MVC 5。我尝试了一些简单的事情，但它不会居中:

 <div>
      <label for="checkbox1"><span></span>IamALabel</label>
      <br/>
     <input id="checkbox1" type="checkbox" name="checkbox" value="IamALabel" checked="checked">
    </div>

还有:

 <div>
      <label for="checkbox1" style="display: inline-block; text-align:center"><span></span>IamALabel</label>
      <br/>
     <input id="checkbox1" type="checkbox" name="checkbox" value="IamALabel" checked="checked">
    </div>

Answer 1

您可以使用display: table 技术:

div {
    display: table;
    float: left;
    margin-right: 15px;
}
label {
    display: table-row;
}
#chk {
    display: table-row;
    width: 100%;
}

<div>
    <label for="male">IamALabel</label>
    <input type="checkbox" id="chk" />         
</div>
<div>
    <label for="male">IamALabel</label>
    <input type="checkbox" id="chk" />         
</div>
<div>
    <label for="male">IamALabel</label>
    <input type="checkbox" id="chk" />         
</div>

编辑

要在 div 元素中添加多个标签/复选框，请在 div 元素中添加 float: left。