Question

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

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

但它不起作用。有人可以帮帮我吗？

Answer 1

添加col-xs-offset-4和text-center以使其位于中心

＆＃13;

<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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果您还想垂直对齐

＆＃13;

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

＆＃13;

<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>

＆＃13;

另一个例子

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我假设你正在使用这个类col-xs-4使用bootstrap

Answer 2

你可以试试这个：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div class="col-xs-4 text-center">
   <input type="checkbox" id="{gruppi.nome_gruppo}" >  
   </div>

＆＃13;

Answer 3

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

.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>

如何对齐div中的复选框

3 个答案: