大きなチェックボックスを中央に合わせる方法

Question

後でスタイルを抽出します。私はまっすぐなHTMLでこれを行う方法を学びたい。

私のチェックボックスがデフォルトサイズである限り、私のwrap1 div内のすべての内容は真ん中に垂直に整列しています。

私は、チェックボックスのサイズを変更する場合は、垂直整列は動作を停止するように見えます。 Here is my JSFiddle。

<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>

Answer 1

あなたはここに物事のカップルを試すことができます：あなたが縦にあなたのチェックボックスを整列する場合は、このようなあなたのチェックボックスをスタイリング試みることができる：

vertical-align: inherit; 

これにより、チェックボックスに親要素と同じ垂直配置プロパティが与えられ、fi xあなたの問題。ただし、そのオプションが機能しない場合は、vertical-align：の長さのプロパティで再生してみてください。これにより、px値を介して配置を調整することができ、正または負の数を取ることができます。これは、あなたの必要な値ではないかもしれないが、例えば：

vertical-align: -10px; 

Answer 2

最善のアプローチは、それが自動正当化し、中央と垂直整列するよう正直に言うとCSSのフレキシボックスを使用することです：

<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>