How to get my text on correct position next to custom checkbox?

Question

#admin_status label {
  width: 80px;
  display: inline-block;
  margin-right:15px;
}

#admin_status label input[type="checkbox"] {
  display:none;  
}

#admin_status label input[type="checkbox"] + .label-text:before {
  content: url("../images/04_checkbox_radiobutton.png");
  font-family: 'Roboto', sans-serif;
  speak: none;
  font-style: noraml;
  font-size: normal;
  font-variant: normal;
  font-transform: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  width: 1em;
  display: inline-block;
  margin-right: 5px;
}

#admin_status label input[type="checkbox"]:checked + .label-text:before {
  content: url("../images/04_checkbox_radiobutton_checked.png"); 
}

#admin_status .checkbox-inline {
  width:100px;
  padding-left:0px;

}

#admin_status .checkbox-inline span {
  margin-left:20px;
  font-size: 1em;
}

      <div id="admin_status">
        <label class="checkbox-inline" id="statusOpen">
          <input type="checkbox" id="status" value="open"><div class="label-text"><span>Active</span></div>
        </label>
        <label class="checkbox-inline" id="statusClose">
          <input type="checkbox" id="status" value="close"><div class="label-text"><span>Locked</span></div>
        </label>
      </div>

As you can see, the text next to custom checkbox image is too low. What can I do to make them vertical-align:middle.

I try to add to css, but not working.

here is the working code with demo

Demo code

Answer 1

First of all i would like to say that you are having too much unnecessary codes to achieve this i don't know where you are using that

though here i tried by changing my way here is the code please look it out

#admin_status label { 
  margin-right:15px;
}
.lab_check_group{
    float:left;
}
input[type="checkbox"]{
    float:left;
    margin-right: 15px;
}
#admin_status label input[type="checkbox"] + .label-text:before {
  content: url("../images/04_checkbox_radiobutton.png");
  font-family: 'Roboto', sans-serif;
  speak: none;
  font-style: noraml;
  font-size: normal;
  font-variant: normal;
  font-transform: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  width: 1em;
  display: inline-block;
  margin-right: 5px;
}

#admin_status label input[type="checkbox"]:checked + .label-text:before {
  content: url("../images/04_checkbox_radiobutton_checked.png"); 
}

#admin_status .checkbox-inline {
  width:100px;
  padding-left:0px;

}

#admin_status .checkbox-inline span {
  margin-left:20px;
  font-size: 1em;
}

  <div id="admin_status">
      <div class="lab_check_group">  
          <label class="checkbox-inline" id="statusOpen">Active</label>
          <input type="checkbox" id="status" value="open">        
      </div>
      <div class="lab_check_group">  
        <label class="checkbox-inline" id="statusClose">Locked</label>
          <input type="checkbox" id="status" value="close">
      </div>

here is the demo working of my code

DEmo Working code

Answer 2

A quick and easy fix-

#admin_status .checkbox-inline span {
position:relative;
bottom: 5px;

}

Might not be the most optimal solution but will work absolutely fine. Hope it helps.

Here's the demo if you want- JSfiddle link