Html 垂直对齐不'；行不通

我举了一个例子：

。表单检查输入：选中+span{
文字装饰：线条贯穿
}
.表格检查输入{
垂直对齐：中间对齐；
}

正文

垂直对齐CSS属性指定内联单元格或表格单元格的垂直对齐方式

在这种情况下，使用display:block呈现输入

要垂直对齐块图元，可以使用多种可用解决方案之一，具体取决于您的情况：

a） 浏览器支持（flexbox）

b） 绝对定位，负边缘

---

等等。

请参阅@August的答案，了解它为什么不起作用

这里有一个使用flexbox的变通方法

.form-check-input:checked+span {
    text-decoration: line-through
}

.form-check-label{
   display: flex;
   align-items: center;
}

---

有关更多详细信息，请参阅

@Witnes小提琴中的不对齐是因为水平对齐，而不是垂直对齐lol当已经有类

表单检查内联时，您不必向引导站点添加更多css


只需使用
.formcheck inline
div将label元素包装起来，如下所示：

<div class="form-check-inline">
  <label class="form-check-label" style="font-size: 2em;">
    <input class="form-check-input" type="checkbox" style="zoom: 1.5" [checked] = "item.done" (click)="toggleDone()">
     <span>Text</span>
  </label>
</div>


正文

并删除已添加的垂直内联css

当您实际寻找的是水平对齐时，您正在尝试更改垂直对齐

表单检查
是用于垂直居中表单元素的引导类

表单检查内联
是用于水平居中表单元素的引导类

jsiddle:
正如@August所说，该属性在一个表单元格中工作，因此请尝试以下内容：


.container{
背景色：#f0；
宽度：100%；
显示：表格；
高度：150像素；
}
.中心形式{
显示：表格单元格；
垂直对齐：中间对齐；
}
.表格检查输入：已检查+范围{
文字装饰：线条贯穿
}
.表格检查输入{
/*垂直对齐：中间对齐*/
/*注意：我会使用一个容器，这样你可以更容易地保持标签和项目在一起*/
}

正文
垂直对齐
是一个稍微命名错误的属性，它只是垂直对齐内联元素，而不是您可能期望的块

看看我放在一起的这个代码笔：

大体上，有两种HTML元素：块级元素和内联元素。您可以使用
display:block和
显示：内联
。初学者感到困惑的是，他们没有意识到每个元素都已经有了浏览器定义的显示方向

您正在使用的元素，如
，
等，是预定义为块的，但一些元素如
是内联的。因此，您必须首先使所有元素都内联，但您会发现这也不太管用

2018年布局的主要方式是使用，它非常紧密地控制两个轴上的对齐。主轴由
justify content
属性控制，次轴由
align items
属性控制。默认情况下，flexbox定向成行，因此垂直控制使用
align items:center大部分时间

您可以设置
显示：flex和容器上的
align items:center
属性，容器中包含要垂直居中的对象。在您的情况下，这是
，因此代码应该是：

.form-check-input {
   display: flex;
   align-items: center;
}

一个简单的解决方案是添加
垂直对齐
标签
元素的所有子元素：


。表单检查输入：选中+span{
文字装饰：线条贯穿
}
.表格检查标签*{
垂直对齐：中间对齐；
}

正文
缩放：1.5
无效。CSS中没有
zoom
属性。@connexo MDN页面明确指出它是非标准的，不应使用。因此，与其使用
zoom:1.5
，不如使用
transform:scale（1.5）
。@Witnes小提琴中的不对齐是因为水平对齐，而不是垂直对齐lol。正如其他答案所示，您不必向引导站点添加更多css，已经有了一个类用于此。检查我的答案lolA复选框，就像其他
输入
元素一样，是内联还是内联块问题仍然是，为什么我使用position:relative它起作用？@Witnes这是因为您的一个外部资源（可能是引导）正在将复选框的位置设置为绝对。默认情况下，它应该是静态的。因此，即使执行
position:static
也可以。