将复选框居中在一行中[重复]答案

【问题标题】：Centering the checkbox in a line [duplicate]将复选框居中在一行中[重复]
【发布时间】：2019-07-24 17:09:00
【问题描述】：

我想将复选框居中放置在旁边的文本行中。

我已经在<div> 中尝试过style="text-align: center;"，但它不起作用。

input {
  font-size: 16px;
}

label {
  font-size: 11px;
  vertical-align: middle;
}

form {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

input[type="checkbox"] {
  width: 15px;
  height: 15px;
  -webkit-appearance: none;
  background: white;
  outline: none;
  border: none;
  border-radius: 50%;
  transition: .5s;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .2)
}

input:checked[type="checkbox"] {
  background-color: transparent;
}

<form class="form-box__form form">
  <input type="e-mail" name="e-mail" id="e-mail" placeholder="e-mail" />
  <input type="password" name="password" id="password" placeholder="password" />
  <button>Create account</button>
  <div style="text-align: center;">
    <input type="checkbox" name="consent" id="consent" />
    <label for="consent">I agree to whatever you want me to agree</label>
  </div>
</form>

目前在附图中看起来像这样。那么有人可以指导我如何将复选框居中对齐吗？ here

【问题讨论】：

标签： html css checkbox

【解决方案1】：

请仅在下面添加您的 css 类，不需要更改您编写的 html：

  vertical-align: middle;
  position: relative;
  bottom: 1px;

input {
    font-size: 16px;
}

label {
    font-size: 11px;
    vertical-align: middle;
}

form {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

input[type="checkbox"] {
    width: 15px;
    height: 15px;
    -webkit-appearance: none;
    background: white;
    outline: none;
    border: none;
    border-radius: 50%;
    transition: .5s;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
        vertical-align: middle;
    position: relative;
    bottom: 1px;
}

input:checked[type="checkbox"] {
    background-color: transparent;
}

<form class="form-box__form form">
    <input type="e-mail" name="e-mail" id="e-mail" placeholder="e-mail"/>
    <input type="password" name="password" id="password" placeholder="password"/>
    <button>Create account</button>
    <div style="text-align: center;">
    <input type="checkbox" name="consent" id="consent"/>
    <label for="consent">I agree to whatever you want me to agree</label>
    </div>
</form>

【讨论】：

【解决方案2】：

只需将复选框放在标签中并使用

display: flex; 
align-items: center;

在标签上

input {
  font-size: 16px;
}

label {
  font-size: 11px;
  vertical-align: middle;
}

form {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

input[type="checkbox"] {
  width: 15px;
  height: 15px;
  -webkit-appearance: none;
  background: white;
  outline: none;
  border: none;
  border-radius: 50%;
  transition: .5s;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .2)
}

input:checked[type="checkbox"] {
  background-color: transparent;
}

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

<form class="form-box__form form">
  <input type="e-mail" name="e-mail" id="e-mail" placeholder="e-mail" />
  <input type="password" name="password" id="password" placeholder="password" />
  <button>Create account</button>
  <div>    
    <label for="consent"><input type="checkbox" name="consent" id="consent" />I agree to whatever you want me to agree</label>
  </div>
</form>

【讨论】：

【解决方案3】：

使用align-items 属性。

div { display: flex; align-items: center; } //immediate parent of checkbox and label

【讨论】：

我已经用过了
我已经修改了答案，将display: flex 属性赋予复选框和标签的直接父级。

【解决方案4】：

为输入的父 div 添加以下样式属性

.div{
Display:inline-flex;
}

Or you can add the below code
 <label for="input" ><input  type="checkbox" name="input" /></label>

【讨论】：

【解决方案5】：

根据您的需要尝试position:relative 和bottom:**px

input {
    font-size: 16px;
}

label {
    font-size: 11px;
    vertical-align: middle;
}

form {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

input[type="checkbox"] {
    width:15px;
    height: 15px;
    -webkit-appearance: none;
    background: white;
    outline: none;
    border: none;
    border-radius: 50%;
    transition: .5s;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
    margin:0;
    bottom:-3.5px;
    position:relative
    
    
}

input:checked[type="checkbox"] {
    background-color: transparent;
}

<form class="form-box__form form">
    <input type="e-mail" name="e-mail" id="e-mail" placeholder="e-mail"/>
    <input type="password" name="password" id="password" placeholder="password"/>
    <button>Create account</button>
    <div style="text-align: center;display:inline;">
   <input type="checkbox" name="consent" id="consent" >
    <label for="consent" > I agree to whatever you want me to agree</label>
    </div>
</form>

【讨论】：

@mkre7 很高兴我能帮助你。如果你觉得有帮助，请投票并接受我的回答。快乐编码:)