如何让HTML表格单元格内的div色块与相邻文本水平对齐

解决方案 #

你可以直接修改.badge的CSS样式即可，无需调整原有HTML结构：

.badge{
  background-color: #000000;
  width: 1em;
  height: 1em;
  border-radius: 25%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px; /* 可自定义调整方块和文本的间距 */
}

改动说明

• display: inline-block：将默认独占一行的块级div转为行内块元素，实现和文本在同一行展示
• vertical-align: middle：让方块和相邻文本的中线水平对齐，你也可以根据需求把值替换为text-top、text-bottom等调整对齐位置
• margin-right是可选属性，用来调整方块和文本之间的留白，你可以根据视觉需求修改数值

内容的提问来源于stack exchange，提问作者poipoi