CODEWITHSUNDEEP
html
Patricia
Patricia

Reputation: 5089

How to vertical-align larger checkbox to middle

I will extract the style later. I want to learn how to do this with straight up HTML.

Notice that as long as my checkbox is the default size, all contents inside of my wrap1 div vertical-align in the middle.

enter image description here

If I change the size of the checkbox then the vertical-align appears to stop working. Here is my JSFiddle.

enter image description here

<div id="wrapper" style="width: 80%; height: 100%; overflow:hidden; margin: 0 auto; float: left">
  <div class="row" style="width: 100%; height: 80%; margin: 0 0 0 0; float: left; background-color: aqua;">
    <div id="heading" class="row">
      <p style="text-align: center;">This is a title</p>
    </div>
    <div class="wrap1" style="vertical-align: middle;">
      <div style="width: 15%; line-height: 53px; text-align: center; background-color: yellow; display: inline-block;">
      <input type="checkbox" style="height: 30px; width: 30px;">
      </div><div style="width: 70%; line-height: 53px; background-color: orange; display: inline-block;"><label>Description</label>
      </div><div style="width: 15%; line-height: 53px; text-align: center; background-color:green; display: inline-block;">
        <label>100</label>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 1922

Answers (2)

Nolan
Nolan

Reputation: 916

Best approach is to use CSS flexbox to be honest as it will auto justify and align center and vertical:

<style type="text/css">

    .main__container {
        position: relative;
        width: 500px;
        height: auto;
    }

    .main__container .content__list {
        position: relative;
        list-style: none;
        width: 100%;
        height: auto;
    }

    .main__container .content__list .content__col {
        position: relative;
        height: 60px;
    }

    .flex-grid {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-box;
        flex-wrap: wrap;
    }

    .flex-row {
        -webkit-box-direction: normal;
        -moz-box-direction: normal;
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .flex-column {
        flex-flow: column;
    }

    .flex-wrap {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .flex-nowrap {
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .flex-cell {
        flex: 1;
    }

    .flex-20 {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex: 1 1 20%;
        -ms-flex: 1 1 20%;
        flex: 1 1 20%;
    }

    .flex-60 {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex: 1 1 60%;
        -ms-flex: 1 1 60%;
        flex: 1 1 60%;
    }

    .flex-100 {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex: 1 1 100%;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
    }


    .grid-center {
        justify-content: center;
        align-items: center;
    }

</style>

<main class="main__container flex-grid flex-row flex-wrap grid-center ">
    <header class="title__container flex-cell flex-100">
        {{--Nav HTML here --}}
    </header>
    <ul class="content__list flex-grid flex-nowrap flex-column grid-center">
        <li class="content__col flex-20 one">
          <input type="checkbox" style="height: 30px; width: 30px;">
        </li>
        <li class="content__col flex-60 two"></li>
        <li class="content__col flex-20 there"></li>
    </ul>
</main>

Upvotes: 2

TCharb
TCharb

Reputation: 464

You can try a couple of things here: if you want to align your checkbox vertically, you could try styling your checkbox like this: 

vertical-align: inherit;

This will give your checkbox the same vertical alignment property of the parent element, and should fix your issue. However, if that option doesn't work, try playing around with the vertical-align: length property. This allows you to adjust alignment via px values, and can take a positive or negative number. This may not be your needed value, but for example: 

vertical-align: -10px;

Upvotes: 1

Related Questions