CODEWITHSUNDEEP
htmltwitter-bootstrapcsscheckbox
Polly
Polly

Reputation: 657

How align a checkbox in a div

I need to align center ( in the middle) a checkbox. This is my code:

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

But it doesn't work. Anyone can help me?

Upvotes: 3

Views: 2933

Answers (2)

Niklesh Raut
Niklesh Raut

Reputation: 34914

Add col-xs-offset-4 and text-center to make it in 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>

Or use col-xs-12 and 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>

If you want also align vertically 

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

Another example 

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

I assume by this class col-xs-4 that you are using bootstrap

Upvotes: 3

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

hello you can get it by setting height in checkbox check this 

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

Upvotes: 0

Related Questions