如何使复选框旁边的文本垂直对齐中心？

Question

input[type="checkbox"] {
  display: none;
}

span:before {
  font-family: "FontAwesome";
  font-style: normal;
  content: 'O';
  margin-right: 3px;
  font-size: 30px;
 }

input[type="checkbox"]:checked ~ span:before {
  content: 'Z';
}

<label>
<input type="checkbox"/>
<span>Text</span>
</label>

有什么办法可以让文本在css内容旁边的中间？

Answer 1

您可以在display: flex元素上使用align-items: center和span。

span {
  display: flex;
  align-items: center;
}
input[type="checkbox"] {
  display: none;
}
span:before {
  font-family: "FontAwesome";
  font-style: normal;
  content: 'O';
  margin-right: 3px;
  font-size: 30px;
}
input[type="checkbox"]:checked ~ span:before {
  content: 'Z';
}

<label>
  <input type="checkbox" />
  <span>Text</span>
</label>

Answer 2

添加

    vertical-align:middle;

到

    span:before {
      font-family: "FontAwesome";
      font-style: normal;
      content: 'O';
      margin-right: 3px;
      font-size: 30px;
      vertical-align:middle;
     }

Answer 3

您可以将以下内容添加到span:before元素中：

span:before {
   vertical-align: middle;
   position: relative;
}

Answer 4

将范围的display设置为flex并对齐项center会有效。

input[type="checkbox"] {
  display: none;
}

label span {
  display: flex;
  align-items: center;
}

span:before {
  font-family: "FontAwesome";
  font-style: normal;
  content: 'O';
  margin-right: 3px;
  font-size: 30px;
 }

input[type="checkbox"]:checked ~ span:before {
  content: 'Z';
}

<label>
<input type="checkbox"/>
<span>Text</span>
</label>

Answer 5

只需将vertical-align：sub添加到span：before

这是js小提琴链接 - Fiddle

span:before {
 font-family: "FontAwesome";
 font-style: normal;
 content: 'O';
 margin-right: 3px;
font-size: 30px;
 vertical-align:sub;
}