Question

＆＃13;

.form-check-input:checked+span {
  text-decoration: line-through
}

.form-check-input {
    vertical-align: middle;
}

＆＃13;

<div class="container alert-info alert">

  <label class="form-check-label" style="font-size: 2em;">
        <input class="form-check-input" type="checkbox" style="zoom: 1.5">
         <span>Text</span>
      </label>

</div>

＆＃13;

即使我使用了vertical-align，我的复选框仍然没有正确对齐。我发现，当我添加位置时：相对它起作用，但我仍然不明白为什么。任何人都可以告诉我为什么有必要添加这个propery。我对CSS / HTML很陌生，可能根本不了解它。

Answer 1

vertical-align是一个有点名不清楚的属性，它只是垂直对齐内联元素，而不是像您一样可能期待的块。

看到我把这个codepen放在一起： https://codepen.io/staypuftman/pen/OXzNRj

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

您正在使用的元素（如<div>，<section>等）预定义为块，但有些像<label>是内联的。因此，您必须首先制作所有元素内联元素，但您发现它也不能很好地工作。

2018年布局的主要方式是使用flexbox，它可以非常紧密地控制两个轴上的对齐。主轴由justify-content属性控制，辅助轴由align-items属性控制。默认情况下，flexbox面向行，因此在大多数情况下使用align-items: center;处理垂直控制。

您在容器上设置display: flex;和align-items: center属性，其中包含您尝试垂直居中的对象。在您的情况下<label class="form-check-input">，代码将是：

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

Answer 2

vertical-align CSS属性指定内联或表格单元格框的垂直对齐方式。

MDN info about vertical-align

在这种情况下，输入使用display：block进行渲染。

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

a）浏览器支持（flexbox）

b）具有负边距的绝对定位，

等。

Answer 3

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

以下是使用 flexbox

的解决方法

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

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

有关详细信息，请参阅Basic Concepts of Flexbox

Answer 4

@ Witnes小提琴中的错位是因为水平对齐，而不是垂直对齐lol当已经有form-check-inline类时，你不必为你的引导网站添加更多的css这一点。

用这样的.form-check-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>

并删除已添加的vertical-inline css。

当您正在寻找水平对齐时，您正尝试更改垂直对齐方式。

form-check是一个用于垂直居中表单元素的引导类。

form-check-inline是一个用于水平居中表单元素的引导类。

jsfiddle：https://jsfiddle.net/er322dLL/2/

Answer 5

正如@August所说，这个属性在一个表格单元格中工作，所以尝试一下这个：

＆＃13;

.container {
    background-color: #f0f0f0;
    width: 100%;
    display: table;
    height: 150px;
}
.centered-form {
    display: table-cell;
    vertical-align: middle;
}
.form-check-input:checked+span {
  text-decoration: line-through
}

.form-check-input {
    /* vertical-align: middle; */
    /* NOTE: I'd use a container so you can more easily keep the label and item together */
}

＆＃13;

<div class="container alert-info alert">
  <div class="centered-form">
  <label class="form-check-label" style="font-size: 2em;">
        <input class="form-check-input" type="checkbox" style="zoom: 1.5">
         <span>Text</span>
      </label>
  </div>
</div>

＆＃13;

Answer 6

一个简单的解决方案是添加vertical-align label元素的所有子元素：

＆＃13;

.form-check-input:checked+span {
  text-decoration: line-through
}

.form-check-label * {
    vertical-align: middle;
}

＆＃13;

<div class="container alert-info alert">

  <label class="form-check-label" style="font-size: 2em;">
        <input class="form-check-input" type="checkbox" style="zoom: 1.5">
         <span>Text</span>
      </label>

</div>

＆＃13;

或者您可以定位input和span：

.form-check-input,
span {
    vertical-align: middle;
}

vertical-align不起作用

6 个答案: