Vertically center text next to a custom checbox?

Question

I have found a few posts related to this subject, but no answers seem to be working in my scenario, I am assuming due to my custom class for the checkbox.

Essentially I just want the text next to the checkbox to always vertically align with it, but the vertical alignment behavior is different based on whether the checkbox is checked or not.

I have made the font-size, height, and line-height equivalent for the text and checkbox, which seems to not have made a difference. I have also tried content: "\200b"; in the css but that also seems to not make a difference.

Also, I am unable to use "newer" html/css things because this is for an application that uses an older version of html/css before flexbox.

.lvl1Name {
  line-height: 22px;
  height: 22px;
  font-size: 22px;
}

.checkboxBig {
  -webkit-appearance: none;
  width: 22px;
  line-height: 22px;
  height: 22px;
  font-size: 22px;
  background: white;
  border-radius: 0px;
  border: 2px solid #144b68;
  line-height: 10px;
  padding-left: 1px;
  text-align: center;
}

.checkboxBig:hover {
  background: #80AED1;
}

.checkboxBig:checked {
  background: #DAE5EB;
}

.checkboxBig:checked:after {
  content: "\2713";
  font-size: 22px;
  padding-left: 1px;
  text-align: center;
  color: #144b68;
  line-height: 22px;
}

.checkboxBig:checked:hover {
  background: #80AED1;
}

<div>
  <input class="checkboxBig" type="checkbox">
  <span class="lvl1Name">Testing</span>
</div>

Just apply `vertical-align: middle` to both elements. – TylerH Aug 19 '20 at 14:57 — TylerH, Aug 19 '20 at 14:57

Matthew Johnson · Answer 1 · 2020-08-19T14:51:43.877

0

You could use flexbox. In the snippet, I added a class of checkbox-wrapper to allow for targeting the div, and used align-items to center it.

.checkbox-wrapper {
  display:flex;
  align-items:center;
}

.lvl1Name {
  line-height: 22px;
  height: 22px;
  font-size: 22px;
}

.checkboxBig {
  -webkit-appearance: none;
  width: 22px;
  line-height: 22px;
  height: 22px;
  font-size: 22px;
  background: white;
  border-radius: 0px;
  border: 2px solid #144b68;
  line-height: 10px;
  font-size: 30px;
  padding-left: 1px;
  text-align: center;
}

.checkboxBig:hover {
  background: #80AED1;
}

.checkboxBig:checked {
  background: #DAE5EB;
}

.checkboxBig:checked:after {
  content: "\2713";
  font-size: 30px;
  padding-left: 1px;
  text-align: center;
  color: #144b68;
  line-height: 9px;
}

.checkboxBig:checked:hover {
  background: #80AED1;
}

<div class="checkbox-wrapper">
  <input class="checkboxBig" type="checkbox">
  <span class="lvl1Name">Testing</span>
</div>

Additionally, you could position the .lvl1Name if flex isn't an option. For that class, add a position:relative and a negative top value:

.lvl1Name {
  position:relative;
  top:-7px;
  line-height: 22px;
  height: 22px;
  font-size: 22px;
}

edited Aug 19 '20 at 14:51

answered Aug 19 '20 at 14:42

Matthew Johnson

4,875
2
38
51

I'm sorry, I should have mentioned that I am unable to use "newer" things like flexbox because this is for an application using an older version of HTML and CSS. – Tyler N Aug 19 '20 at 14:44
1

You need to support IE9? Everything else is already supported. – Matthew Johnson Aug 19 '20 at 14:46
this is for an "offline" application, the html/css/js will not be getting rendered in a browser. It's a corporate application that doesn't have a plan to update its internal renderer soon. – Tyler N Aug 19 '20 at 14:47
Added an additional solution, hope it helps! – Matthew Johnson Aug 19 '20 at 14:52
Thank you for accommodating me with the non-flexbox solution! – Tyler N Aug 19 '20 at 15:01

Nithish · Answer 2 · 2020-08-19T15:03:08.360

You can add a class to the div containing both the elements and use flex box css.

.container{
  display: flex;
  align-items: center;
}

.lvl1Name {
  line-height: 22px;
  height: 22px;
  font-size: 22px;
}

.checkboxBig {
  -webkit-appearance: none;
  width: 22px;
  line-height: 22px;
  height: 22px;
  font-size: 22px;
  background: white;
  border-radius: 0px;
  border: 2px solid #144b68;
  line-height: 10px;
  font-size: 30px;
  padding-left: 1px;
  text-align: center;
  
}

.checkboxBig:hover {
  background: #80AED1;
}

.checkboxBig:checked {
  background: #DAE5EB;
}

.checkboxBig:checked:after {
  content: "\2713";
  font-size: 30px;
  padding-left: 1px;
  text-align: center;
  color: #144b68;
  line-height: 9px;
}

.checkboxBig:checked:hover {
  background: #80AED1;
}

<div class="container">
  <input class="checkboxBig" type="checkbox">
  <span class="lvl1Name">Testing</span>
</div>

If flex box is not something that you are looking for, then you can use vertical-align.

.lvl1Name {
  line-height: 22px;
  height: 22px;
  font-size: 22px;
  vertical-align: middle;
}

.checkboxBig {
  -webkit-appearance: none;
  width: 22px;
  line-height: 22px;
  height: 22px;
  font-size: 22px;
  background: white;
  border-radius: 0px;
  border: 2px solid #144b68;
  line-height: 10px;
  font-size: 30px;
  padding-left: 1px;
  text-align: center;
  vertical-align: middle;
}

.checkboxBig:hover {
  background: #80AED1;
}

.checkboxBig:checked {
  background: #DAE5EB;
}

.checkboxBig:checked:after {
  content: "\2713";
  font-size: 30px;
  padding-left: 1px;
  text-align: center;
  color: #144b68;
  line-height: 9px;
}

.checkboxBig:checked:hover {
  background: #80AED1;
}

<div>
  <input class="checkboxBig" type="checkbox">
  <span class="lvl1Name">Testing</span>
</div>

I'm sorry, I should have mentioned that I am unable to use "newer" things like flexbox because this is for an application using an older version of HTML and CSS. — Tyler N, Aug 19 '20 at 14:46

Ritu · Answer 3 · 2020-08-19T14:57:17.710

Please try using position: absolute and top property on .lvlName class and set position: realtive property on the parent element. position property sets how an element is positioned in a document.

For more about position property see mdn

.lvl1Name {
  line-height: 22px;
  height: 22px;
  font-size: 22px;
  position: absolute;
  top: 5px;
}
.main-div {
  position: relative;
}

.lvl1Name {
  line-height: 22px;
  height: 22px;
  font-size: 22px;
  position: absolute;
  top: 5px;
}

.checkboxBig {
  -webkit-appearance: none;
  width: 22px;
  line-height: 22px;
  height: 22px;
  font-size: 22px;
  background: white;
  border-radius: 0px;
  border: 2px solid #144b68;
  line-height: 10px;
  padding-left: 1px;
  text-align: center;
}

.checkboxBig:hover {
  background: #80AED1;
}

.checkboxBig:checked {
  background: #DAE5EB;
}

.checkboxBig:checked:after {
  content: "\2713";
  font-size: 22px;
  padding-left: 1px;
  text-align: center;
  color: #144b68;
  line-height: 22px;
}

.checkboxBig:checked:hover {
  background: #80AED1;
}

.main-div {
  position: relative;
}

<div class="main-div">
  <input class="checkboxBig" type="checkbox">
  <span class="lvl1Name">Testing</span>
</div>

score 0 · Answer 4 · answered Aug 19 '20 at 14:53

In your case, with the same font-size, line-height and height just add vertical-align: bottom; to the checkbox.

.lvl1Name {
  font-size: 22px;
}

.checkboxBig {
  vertical-align: bottom;
  -webkit-appearance: none;
  width: 22px;
  line-height: 22px;
  height: 22px;
  font-size: 22px;
  background: white;
  border-radius: 0px;
  border: 2px solid #144b68;
  line-height: 10px;
  padding-left: 1px;
  text-align: center;
}

.checkboxBig:hover {
  background: #80AED1;
}

.checkboxBig:checked {
  background: #DAE5EB;
}

.checkboxBig:checked:after {
  content: "\2713";
  font-size: 22px;
  padding-left: 1px;
  text-align: center;
  color: #144b68;
  line-height: 22px;
}

.checkboxBig:checked:hover {
  background: #80AED1;
}

<div>
  <input class="checkboxBig" type="checkbox">
  <span class="lvl1Name">Testing</span>
</div>

score -1 · Answer 5 · answered Aug 19 '20 at 14:45

-1

Try using the display:flex in the div. Using flexbox usually helps to solve a lot of problems like this.

answered Aug 19 '20 at 14:45

vitorsouza

1

I'm sorry, I should have mentioned that I am unable to use "newer" things like flexbox because this is for an application using an older version of HTML and CSS. I have now updated my post. – Tyler N Aug 19 '20 at 14:46

Vertically center text next to a custom checbox?

5 Answers5