如何对齐div中的复选框答案

【问题标题】：How align a checkbox in a div如何对齐div中的复选框
【发布时间】：2018-03-02 14:02:36
【问题描述】：

我需要对齐中心（在中间）一个复选框。这是我的代码：

  <div class="col-xs-4"><input type="checkbox" id="{gruppi.nome_gruppo}" style="vertical-align:middle"></div>

但它不起作用。谁能帮帮我？

【问题讨论】：

标签： html twitter-bootstrap css checkbox

【解决方案1】：

添加col-xs-offset-4 和text-center 使其居中

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="col-xs-4 col-xs-offset-4 text-center"><input type="checkbox" id="{gruppi.nome_gruppo}" style="vertical-align:middle"></div>

或者使用col-xs-12和text-center

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="col-xs-12 text-center"><input type="checkbox" id="{gruppi.nome_gruppo}" style="vertical-align:middle"></div>

如果你也想垂直对齐

.outer-class{
  width:100px;
  height:100px;
  background-color:#ccc;
}
.inner-class{
  line-height:100px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="outer-class">
  <div class="inner-class text-center"><input type="checkbox" id="{gruppi.nome_gruppo}" style="vertical-align:middle"></div>
  </div>

另一个例子

.outer{
  width:100%;
  height:100px;
  background-color:#ccc;
}
.inner{
  width:50%;
  height:50%;
  background-color:#808080;
}
.make-center{
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="outer make-center">
  <div class="inner make-center">
    <input type="checkbox" id="{gruppi.nome_gruppo}" style="vertical-align:middle;height:40px">
  </div>
</div>

我通过此类 col-xs-4 假设您正在使用引导程序

【讨论】：

【解决方案2】：

你好，你可以通过在复选框中设置高度来获得它检查这个

.bg{
background:#e2e2e2;}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-xs-4 bg"><input type="checkbox" id="{gruppi.nome_gruppo}" style="vertical-align:middle;height:40px"></div>

【讨论】：