CODEWITHSUNDEEP
htmlcss
Code Guy
Code Guy

Reputation: 3198

Setting vertical align as middle cannot be applied for a checkbox

I need to middle align the checkbox and a label like the second, Also the trabsition effects of the checbox is also not middle aligning on top of the checkbox.

<style>
.branding-below {
    bottom: 56px;
    top: 0
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid gray 1px!important;
    outline: 0
}

@keyframes ripple{0%{transform:scale(0,0);opacity:1}20%{transform:scale(25,25);opacity:1}to{opacity:0;transform:scale(40,40)}}#onoff+label{display:inline-block;padding-right:10px;margin-left:45px;position:relative}#onoff{position:absolute;left:-9999px}#onoff+label::after{content:'';border:2px solid rgba(0,0,0,.5);border-radius:2px;position:absolute;top:50%;transform:translate(-20px,-50%);box-sizing:border-box;width:20px;height:20px;transition:background-color 1s;background-position:-2px -1px;background-color:rgba(255,0,0,.4)}#onoff:checked+label::after{border:2px solid #0f9d58;background-color:rgba(15,157,88,.7);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgBwEQARzBMMQpAAAAN0lEQVQI12NgQAEHGBgYHzAwMAMxO5DN38AgIM/AYGHHwFBTw8Bg94OBQf4DUBgqzdwAVI5qAACbXgn3nmfmHgAAAABJRU5ErkJggg==)}#onoff:disabled+label::after{border:2px solid rgba(0,0,0,.1);background-color:rgba(0,0,0,.05);background-image:none}#onoff+label::before{content:'';border-radius:50%;background-color:rgba(0,0,0,.1);position:absolute;box-sizing:border-box;top:50%;transform:translate(-50%,-50%) scale(0);width:1.8px;height:1.8px}#onoff:focus+label::before{animation:ripple 1s ease-out}#onoff+label::after{left:-10px;right:auto}#onoff+label::before{left:0;right:auto}

</style>

<table border="0" width="100%" style="table-layout:fixed;">
                    <tr>
                        <td colspan="2">

                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div style="height:42px;padding: 0;align-items: center;border-radius: 2px;line-height: 16px;border: 1px solid;border-color: #bed9b2;">
                            <div class="onoffdiv">
                            <input id="onoff" type="checkbox" style="display:table-column"/>
                            <label for="onoff" style="margin-right: 40px;" class="lbl gray">Turn ON</label>
                            </div>                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div style="padding: 0;align-items: center;border-radius: 2px;line-height: 16px;border: 1px solid;border-color: #bed9b2;">
                              <svg style="padding: 6px;height: 28px;width: auto;background-color: #bed9b2;border-right: 1px solid #bed9b2;vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" width="20.222" height="28" preserveAspectRatio="none" xmlns:v="https://vecta.io/nano"><defs><linearGradient gradientUnits="userSpaceOnUse" id="A" x1="21.75" x2="21.75" y1="8.73" y2="16.501"><stop stop-color="#1a237e" stop-opacity=".2" offset="0%"></stop><stop stop-color="#1a237e" stop-opacity=".02" offset="100%"></stop></linearGradient><radialGradient gradientUnits="userSpaceOnUse" id="B" cx=".969" cy=".832" r="49.332" fx=".969" fy=".832" gradientTransform="scale(0.84983659,1.1766968)"><stop stop-color="#fff" offset="0%"></stop><stop stop-color="#fff" stop-opacity="0" offset="100%"></stop></radialGradient></defs><g transform="matrix(.777778 0 0 .777778 -5.444444 -1.555556)" fill-rule="evenodd"><path d="M9.5 2H24l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5v-31A2.5 2.5 0 0 1 9.5 2z" fill="#0f9d58"></path><path d="M7 35a2.5 2.5 0 0 0 2.5 2.5h21A2.5 2.5 0 0 0 33 35v.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5z" fill="#263238" fill-opacity=".1"></path><path d="M9.5 2H24v.5H9.5A2.5 2.5 0 0 0 7 5v-.5A2.5 2.5 0 0 1 9.5 2z" fill="#fff" fill-opacity=".2"></path><path d="M17.5 8l8.5 8.5V9" transform="translate(7 2)" fill="url(#A)" fill-rule="nonzero"></path><path d="M24 2l9 9h-6.5A2.5 2.5 0 0 1 24 8.5z" fill="#87ceac"></path><path d="M13 18h14v14H13zm2 2v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2zm6-8v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2z" fill="#f1f1f1"></path><path d="M2.5 0H17l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 0 33.5v-31A2.5 2.5 0 0 1 2.5 0z" transform="translate(7 2)" fill="url(#B)" fill-opacity=".1"></path></g></svg>
                              <span id="title"><a style="color:#555;text-decoration:none;padding-left: 10px;" target="_blank" href="https://docs.google.com/spreadsheets/d/1ukq2PWMyURzNH1bzCwKosPcBfdjPejVi4YzgAykd5YA/edit">Find &amp; Replace Sheet</a></span>
                            </div>
                        </td>
                    </tr>




                </table>

Upvotes: 2

Views: 60

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105873

you need to update :

#onoff+label::before {
  left: -20px;/* here offset updated */
  right: auto
}

Démo 

.branding-below {
  bottom: 56px;
  top: 0
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: solid gray 1px!important;
  outline: 0
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1
  }
  20% {
    transform: scale(25, 25);
    opacity: 1
  }
  to {
    opacity: 0;
    transform: scale(40, 40)
  }
}

#onoff+label {
  display: inline-block;
  padding-right: 10px;
  margin-left: 45px;
  position: relative
}

#onoff {
  position: absolute;
  left: -9999px
}

#onoff+label::after {
  content: '';
  border: 2px solid rgba(0, 0, 0, .5);
  border-radius: 2px;
  position: absolute;
  top: 50%;
  transform: translate(-20px, -50%);
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  transition: background-color 1s;
  background-position: -2px -1px;
  background-color: rgba(255, 0, 0, .4)
}

#onoff:checked+label::after {
  border: 2px solid #0f9d58;
  background-color: rgba(15, 157, 88, .7);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgBwEQARzBMMQpAAAAN0lEQVQI12NgQAEHGBgYHzAwMAMxO5DN38AgIM/AYGHHwFBTw8Bg94OBQf4DUBgqzdwAVI5qAACbXgn3nmfmHgAAAABJRU5ErkJggg==)
}

#onoff:disabled+label::after {
  border: 2px solid rgba(0, 0, 0, .1);
  background-color: rgba(0, 0, 0, .05);
  background-image: none
}

#onoff+label::before {
  content: '';
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .1);
  position: absolute;
  box-sizing: border-box;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 1.8px;
  height: 1.8px
}

#onoff:focus+label::before {
  animation: ripple 1s ease-out
}

#onoff+label::after {
  left: -10px;
  right: auto
}

#onoff+label::before {
  left: -20px;
  /* here offset updated */
  right: auto
}
<table border="0" width="100%" style="table-layout:fixed;">
  <tr>
    <td colspan="2">

    </td>
  </tr>
  <tr>
    <td colspan="2">
      <div style="display: flex; align-items: center; height:42px;padding: 0;align-items: center;border-radius: 2px;line-height: 16px;border: 1px solid;border-color: #bed9b2;">
        <div class="onoffdiv">
          <input id="onoff" type="checkbox" style="display:table-column" />
          <label for="onoff" style="margin-right: 40px;" class="lbl gray">Turn ON</label>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <div style="display: flex; padding: 0;align-items: center;border-radius: 2px;line-height: 16px;border: 1px solid;border-color: #bed9b2;">
        <svg style="padding: 6px;height: 28px;width: auto;background-color: #bed9b2;border-right: 1px solid #bed9b2;vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" width="20.222" height="28" preserveAspectRatio="none" xmlns:v="https://vecta.io/nano"><defs><linearGradient gradientUnits="userSpaceOnUse" id="A" x1="21.75" x2="21.75" y1="8.73" y2="16.501"><stop stop-color="#1a237e" stop-opacity=".2" offset="0%"></stop><stop stop-color="#1a237e" stop-opacity=".02" offset="100%"></stop></linearGradient><radialGradient gradientUnits="userSpaceOnUse" id="B" cx=".969" cy=".832" r="49.332" fx=".969" fy=".832" gradientTransform="scale(0.84983659,1.1766968)"><stop stop-color="#fff" offset="0%"></stop><stop stop-color="#fff" stop-opacity="0" offset="100%"></stop></radialGradient></defs><g transform="matrix(.777778 0 0 .777778 -5.444444 -1.555556)" fill-rule="evenodd"><path d="M9.5 2H24l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5v-31A2.5 2.5 0 0 1 9.5 2z" fill="#0f9d58"></path><path d="M7 35a2.5 2.5 0 0 0 2.5 2.5h21A2.5 2.5 0 0 0 33 35v.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5z" fill="#263238" fill-opacity=".1"></path><path d="M9.5 2H24v.5H9.5A2.5 2.5 0 0 0 7 5v-.5A2.5 2.5 0 0 1 9.5 2z" fill="#fff" fill-opacity=".2"></path><path d="M17.5 8l8.5 8.5V9" transform="translate(7 2)" fill="url(#A)" fill-rule="nonzero"></path><path d="M24 2l9 9h-6.5A2.5 2.5 0 0 1 24 8.5z" fill="#87ceac"></path><path d="M13 18h14v14H13zm2 2v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2zm6-8v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2z" fill="#f1f1f1"></path><path d="M2.5 0H17l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 0 33.5v-31A2.5 2.5 0 0 1 2.5 0z" transform="translate(7 2)" fill="url(#B)" fill-opacity=".1"></path></g></svg>
        <span id="title"><a style="color:#555;text-decoration:none;padding-left: 10px;" target="_blank" href="https://docs.google.com/spreadsheets/d/1ukq2PWMyURzNH1bzCwKosPcBfdjPejVi4YzgAykd5YA/edit">Find &amp; Replace Sheet</a></span>
      </div>
    </td>
  </tr>




</table>

Upvotes: 2

s.kuznetsov
s.kuznetsov

Reputation: 15213

You already have a vertical alignment rule set - align-items: center. You just have to add display: flex to this div tag as shown below.

<div style="display: flex; height:42px;padding: 0;align-items: center;border-radius: 2px;line-height: 16px;border: 1px solid;border-color: #bed9b2;">

To improve the positioning of the animation of clicking on the checkbox, use these rules for the pseudo-class :before:

#onoff+label::before {
    left: -23px;
    top: 5px;
}

Upvotes: 2

Muhammad
Muhammad

Reputation: 7324

Use display: flex; align-items: center;

<style>
.branding-below {
    bottom: 56px;
    top: 0
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid gray 1px!important;
    outline: 0
}

@keyframes ripple{0%{transform:scale(0,0);opacity:1}20%{transform:scale(25,25);opacity:1}to{opacity:0;transform:scale(40,40)}}#onoff+label{display:inline-block;padding-right:10px;margin-left:45px;position:relative}#onoff{position:absolute;left:-9999px}#onoff+label::after{content:'';border:2px solid rgba(0,0,0,.5);border-radius:2px;position:absolute;top:50%;transform:translate(-20px,-50%);box-sizing:border-box;width:20px;height:20px;transition:background-color 1s;background-position:-2px -1px;background-color:rgba(255,0,0,.4)}#onoff:checked+label::after{border:2px solid #0f9d58;background-color:rgba(15,157,88,.7);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgBwEQARzBMMQpAAAAN0lEQVQI12NgQAEHGBgYHzAwMAMxO5DN38AgIM/AYGHHwFBTw8Bg94OBQf4DUBgqzdwAVI5qAACbXgn3nmfmHgAAAABJRU5ErkJggg==)}#onoff:disabled+label::after{border:2px solid rgba(0,0,0,.1);background-color:rgba(0,0,0,.05);background-image:none}#onoff+label::before{content:'';border-radius:50%;background-color:rgba(0,0,0,.1);position:absolute;box-sizing:border-box;top:50%;transform:translate(-50%,-50%) scale(0);width:1.8px;height:1.8px}#onoff:focus+label::before{animation:ripple 1s ease-out}#onoff+label::after{left:-10px;right:auto}#onoff+label::before{left:0;right:auto}

</style>

<table border="0" width="100%" style="table-layout:fixed;">
                    <tr>
                        <td colspan="2">

                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div style="display: flex; align-items: center; height:42px;padding: 0;align-items: center;border-radius: 2px;line-height: 16px;border: 1px solid;border-color: #bed9b2;">
                            <div class="onoffdiv">
                            <input id="onoff" type="checkbox" style="display:table-column"/>
                            <label for="onoff" style="margin-right: 40px;" class="lbl gray">Turn ON</label>
                            </div>                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div style="display: flex; padding: 0;align-items: center;border-radius: 2px;line-height: 16px;border: 1px solid;border-color: #bed9b2;">
                              <svg style="padding: 6px;height: 28px;width: auto;background-color: #bed9b2;border-right: 1px solid #bed9b2;vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" width="20.222" height="28" preserveAspectRatio="none" xmlns:v="https://vecta.io/nano"><defs><linearGradient gradientUnits="userSpaceOnUse" id="A" x1="21.75" x2="21.75" y1="8.73" y2="16.501"><stop stop-color="#1a237e" stop-opacity=".2" offset="0%"></stop><stop stop-color="#1a237e" stop-opacity=".02" offset="100%"></stop></linearGradient><radialGradient gradientUnits="userSpaceOnUse" id="B" cx=".969" cy=".832" r="49.332" fx=".969" fy=".832" gradientTransform="scale(0.84983659,1.1766968)"><stop stop-color="#fff" offset="0%"></stop><stop stop-color="#fff" stop-opacity="0" offset="100%"></stop></radialGradient></defs><g transform="matrix(.777778 0 0 .777778 -5.444444 -1.555556)" fill-rule="evenodd"><path d="M9.5 2H24l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5v-31A2.5 2.5 0 0 1 9.5 2z" fill="#0f9d58"></path><path d="M7 35a2.5 2.5 0 0 0 2.5 2.5h21A2.5 2.5 0 0 0 33 35v.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 7 35.5z" fill="#263238" fill-opacity=".1"></path><path d="M9.5 2H24v.5H9.5A2.5 2.5 0 0 0 7 5v-.5A2.5 2.5 0 0 1 9.5 2z" fill="#fff" fill-opacity=".2"></path><path d="M17.5 8l8.5 8.5V9" transform="translate(7 2)" fill="url(#A)" fill-rule="nonzero"></path><path d="M24 2l9 9h-6.5A2.5 2.5 0 0 1 24 8.5z" fill="#87ceac"></path><path d="M13 18h14v14H13zm2 2v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2zm6-8v2h4v-2zm0 4v2h4v-2zm0 4v2h4v-2z" fill="#f1f1f1"></path><path d="M2.5 0H17l9 9v24.5a2.5 2.5 0 0 1-2.5 2.5h-21A2.5 2.5 0 0 1 0 33.5v-31A2.5 2.5 0 0 1 2.5 0z" transform="translate(7 2)" fill="url(#B)" fill-opacity=".1"></path></g></svg>
                              <span id="title"><a style="color:#555;text-decoration:none;padding-left: 10px;" target="_blank" href="https://docs.google.com/spreadsheets/d/1ukq2PWMyURzNH1bzCwKosPcBfdjPejVi4YzgAykd5YA/edit">Find &amp; Replace Sheet</a></span>
                            </div>
                        </td>
                    </tr>




                </table>

Upvotes: 2

Foxlab
Foxlab

Reputation: 922

In the DIV container of your checkbox, you forgot the flex style that work with your style align-items

<div style="height:42px;padding: 0;align-items: center;border-radius: 2px;line-height: 16px;border: 1px solid;border-color: #bed9b2; display: flex;">

Upvotes: 3

Related Questions