Vertical align middle about awesome-bootstrap-checkbox HOT 10 CLOSED

I've added the fix @tvdeyen advised which aligned the label text with the box, thank you, but I have some issues with the location of the tick. I'm using Bootstrap v3.3.7

EDIT: I added margin-top: 0px; to .checkbox input[type="checkbox"]:checked + label::after

from awesome-bootstrap-checkbox.

If the line-height is higher then normal, the vertical alignment is broken:

This is because of the position: absolute of the label::before and after elements.

This fixes it:

@import "awesome-bootstrap-checkbox";

.radio, .checkbox {

  label {

    &::before, &::after { top: 50%; }
    &::before { margin-top: -9px; }
    &::after { margin-top: -6px; }
  }
}

from awesome-bootstrap-checkbox.

Any solutions for pure css?

from awesome-bootstrap-checkbox.

Building on the answer provided by @tvdeyen, here's a pure CSS solution that also solves the issue @LeiChat identified in Bootstrap 3:

.radio label::before,
.checkbox label::before,
.radio label::after,
.checkbox label::after {
    top: 50%;
}

.radio label::before,
.checkbox label::before,
.checkbox label::after {
    margin-top: -9px;
}

.radio label::after {
    margin-top: -6px;
}

from awesome-bootstrap-checkbox.

Here's the solution I'm using for Bootstrap 4:

.radio label::before,
.checkbox label::before,
.radio label::after,
.checkbox label::after {
    top: 50%;
}

.checkbox label::before,
.radio label::before {
    margin-top: -10px;
}

.checkbox label::after,
.radio label::after {
    margin-top: 2px;
}

from awesome-bootstrap-checkbox.

Hi. Could you give the screenshot, please? So we can better understand your problem.

from awesome-bootstrap-checkbox.

Running into the same issue: The vertical alignment of text is off

from awesome-bootstrap-checkbox.

Thank you @tvdeyen, it works!

from awesome-bootstrap-checkbox.

I'm having the same problem as @LeiChat

from awesome-bootstrap-checkbox.

For the .radio label before and after classes I have used margin-top: 3px, rather than the -9px and -6px that @tvdeyen suggested.

from awesome-bootstrap-checkbox.