CODEWITHSUNDEEP
htmlcss
Murtuza Z
Murtuza Z

Reputation: 6017

How to align content in center using CSS?

I am new to CSS & trying to create my own custom tristate checkbox editor for SlickGrid but the alignment of content is not correct, I want to place the checkmark and hyphen in center of a square, I tried applying css padding: 2px to partial & checked class but it didn't help.

This is how it displays in Grid.

enter image description here enter image description here

.multi-checkbox .check {
  display: inline-block;
  vertical-align: top;
  width: 15px;
  height: 15px;
  border: 1px solid #333;
  margin: 3px;
}

.multi-checkbox .check.unchecked {
  background: #fff;
}

.multi-checkbox .check.partial:after {
  content: "\2010";
}

.multi-checkbox .check.checked:after {
  content: "\2713";
}
<div class="multi-checkbox">
<span class="check partial" hidefocus="" style=""></span>
</div>

<div class="multi-checkbox">
<span class="check checked" hidefocus="" style=""></span>
</div>

Upvotes: 0

Views: 792

Answers (7)

VXp
VXp

Reputation: 12118

You can do it with the Flexbox:

.multi-checkbox .check {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
  align-items: center; /* and vertically */
  width: 15px;
  height: 15px;
  border: 1px solid #333;
  margin: 3px;
}

.multi-checkbox .check.unchecked {background: #fff}
.multi-checkbox .check.partial:after {content: "\2010"}
.multi-checkbox .check.checked:after {content: "\2713"}
<div class="multi-checkbox">
  <span class="check partial" hidefocus="" style=""></span>
</div>

<div class="multi-checkbox">
  <span class="check checked" hidefocus="" style=""></span>
</div>

Upvotes: 2

Jordi Vicens
Jordi Vicens

Reputation: 772

You can align content on the center using Flexbox like this:

.multi-checkbox .check {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  text-align: center;
  width: 15px;
  height: 15px;
  border: 1px solid #333;
  margin: 3px;
  
}

.multi-checkbox .check.unchecked {
  background: #fff;
}

.multi-checkbox .check.partial:after {
  content: "\2010";
}

.multi-checkbox .check.checked:after {
  content: "\2713";
}
<div class="multi-checkbox">
<span class="check partial" hidefocus="" style=""></span>
</div>

<div class="multi-checkbox">
<span class="check checked" hidefocus="" style=""></span>
</div>

Upvotes: 2

Johannes
Johannes

Reputation: 67798

Since those characters/symbols are part of a font, they are aligned like letters, i.e. there can be space above and below them, depending on the particular character (different for many characters of a font, and different for the two characters you are using in your example).

But you can use text-align: center for the horizontal centering and a padding setting that adds up to the same amount on all four sides to move the characters up a bit. In my example below I used padding: 0px 2px 4px 2px 

.multi-checkbox .check {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid #333;
  margin: 3px;
  padding: 0 2px 4px 2px;
  text-align: center;
}

.multi-checkbox .check.unchecked {
  background: #fff;
}

.multi-checkbox .check.partial:after {
  content: "\2010";
}

.multi-checkbox .check.checked:after {
  content: "\2713";
}
<div class="multi-checkbox">
<span class="check partial" hidefocus="" style=""></span>
</div>

<div class="multi-checkbox">
<span class="check checked" hidefocus="" style=""></span>
</div>

Upvotes: 2

Ruchi
Ruchi

Reputation: 55

.multi-checkbox .check {
  display: inline-block;
  width: 15px;
  border: 1px solid #333;
  margin: 3px;
  text-align: center;
}

.multi-checkbox .check.unchecked {
  background: #fff;
}

.multi-checkbox .check.partial:after {
  content: "\2010";
}

.multi-checkbox .check.checked:after {
  content: "\2713";
}
<div class="multi-checkbox">
<span class="check partial" hidefocus="" style=""></span>
</div>

<div class="multi-checkbox">
<span class="check checked" hidefocus="" style=""></span>
</div>

Upvotes: 1

Ravi Ubana
Ravi Ubana

Reputation: 395

Just change 

.multi-checkbox .check {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid #333;
  margin: 3px;
  text-align: center;
  line-height: 15px;
}

Upvotes: 0

PraveenKumar
PraveenKumar

Reputation: 1861

Hope this helps you.

.multi-checkbox .check {
  display: inline-block;
  vertical-align: top;
  width: 15px;
  height: 15px;
  border: 1px solid #333;
  margin: 3px;
  line-height:15px;
}
.multi-checkbox .check.unchecked {
  background: #fff;
}
.multi-checkbox .check:after{
  display:block;
  text-align:center;
}
.multi-checkbox .check.partial:after {
  content: "\2010";
}
.multi-checkbox .check.checked:after {
  content: "\2713";
}
<div class="multi-checkbox">
<span class="check partial" hidefocus="" style=""></span>
</div>

<div class="multi-checkbox">
<span class="check checked" hidefocus="" style=""></span>
</div>

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122105

You can use line-height and text-align: center.

.multi-checkbox .check {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid #333;
  margin: 3px;
  text-align: center;
  line-height: 15px;
}

.multi-checkbox .check.unchecked {
  background: #fff;
}

.multi-checkbox .check.partial:after {
  content: "\2010";
}

.multi-checkbox .check.checked:after {
  content: "\2713";
}
<div class="multi-checkbox">
  <span class="check partial" hidefocus="" style=""></span>
</div>

<div class="multi-checkbox">
  <span class="check checked" hidefocus="" style=""></span>
</div>

Upvotes: 2

Related Questions