Question

首先，我正在寻找解决方案，但是没有一个对我有用，我不知道为什么。

我想在表格单元格中居中放置一个复选框。

我在Chrome中的“输出”： screenshot

我的代码：

{ 
  text-align: center;
  vertical-align:center;
}

<td class="align-middle text-center" style="border: 1px solid red; width: 50px;">
	<div class="form-check-inline">
    <input type="checkbox" class="form-check-input" style="margin-left: 0px; padding-left: 0px; padding-right: 0px; margin-right: 0px;" name="students[]" id="students" value="{{ $student->id }}">   
    </div>
 </td>

我只是不能水平居中。我正在尝试样式属性和CSS { text-align: center; vertical-align:center;)中的所有内容。

Answer 1

将对齐方式属性应用于您为td元素定义的类，并确保将其包装在表格中，否则td标签将被浏览器剥离（请参阅{{ 3}}）：

.align-middle { 
  vertical-align:center;
}

.text-center {
  text-align: center;
}

<table>
  <td class="align-middle text-center" style="border: 1px solid red; width: 50px;">
    <div class="form-check-inline">
      <input type="checkbox" class="form-check-input" style="margin-left: 0px; padding-left: 0px; padding-right: 0px; margin-right: 0px;" name="students[]" id="students" value="{{ $student->id }}">   
    </div>
  </td>
</table>

td中的居中复选框（引导程序）

1 个答案: