トグルの両側のテキストの中央揃え

Question

CSSで物事がなぜ難しいのですか？私はボックスの中にトグルスイッチを入れて、どちらの側にもテキストを垂直に配置したい。

私が試しても、テキストを含むdivは、トグルスイッチを含むdivに対して垂直にずらされてしまいます。

私は垂直センタリングに関する他の十数の質問を読んでいます...それらのどれも適用されないようです。ここにいくつかの原則はありませんか？

フィドル：https://jsfiddle.net/cinerobert/h7g31bqa/

HTML：

<div id="div-yesnotoggle"> 
    <div id="div-notext">No</div> 
    <div id="div-switch"> 
    <label class="switch"> 
     <input type="checkbox"> 
     <div class="slider round"></div> 
    </label> 
    </div> 
    <div id="div-yestext"> 
    Yes 
    </div> 
</div> 

CSS：

#div-yesnotoggle { 
    border: solid; 
    width: 160px; 
    display: inline-block; 
} 

#div-notext { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    display: inline-block; 
    border: solid; 
    width: 40px; 
} 

#div-switch { 
    border: solid; 
    display: inline-block; 
    width: 60px; 
} 

#div-yestext { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    display: inline-block; 
    border: solid; 
} 

Answer 1

要素のそれぞれにパディングを削除して、主容器 に適用し、垂直整列適用：中央をスワスで

をチェックしてくださいスニペット

#div-yesnotoggle { 
 
    border: solid; 
 
    width: 160px; 
 
    display: inline-block; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
} 
 
#div-notext { 
 
    display: inline-block; 
 
    border: solid; 
 
    width: 40px; 
 
} 
 
#div-switch { 
 
    border: solid; 
 
    display: inline-block; 
 
    width: 60px; 
 
    vertical-align: middle; 
 
} 
 
#div-yestext { 
 
    display: inline-block; 
 
    border: solid; 
 
} 
 
.switch { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 60px; 
 
    height: 34px; 
 
} 
 
.switch input { 
 
    display: none; 
 
} 
 
.slider { 
 
    position: absolute; 
 
    cursor: pointer; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-color: #ccc; 
 
    -webkit-transition: .4s; 
 
    transition: .4s; 
 
} 
 
.slider:before { 
 
    position: absolute; 
 
    content: ""; 
 
    height: 26px; 
 
    width: 26px; 
 
    left: 4px; 
 
    bottom: 4px; 
 
    background-color: white; 
 
    -webkit-transition: .4s; 
 
    transition: .4s; 
 
} 
 
input:checked + .slider { 
 
    background-color: #2196F3; 
 
} 
 
input:focus + .slider { 
 
    box-shadow: 0 0 1px #2196F3; 
 
} 
 
input:checked + .slider:before { 
 
    -webkit-transform: translateX(26px); 
 
    -ms-transform: translateX(26px); 
 
    transform: translateX(26px); 
 
} 
 
/* Rounded sliders */ 
 

 
.slider.round { 
 
    border-radius: 34px; 
 
} 
 
.slider.round:before { 
 
    border-radius: 50%; 
 
}

<div id="div-yesnotoggle"> 
 
    <div id="div-notext">No</div> 
 
    <div id="div-switch"> 
 
    <label class="switch"> 
 
     <input type="checkbox"> 
 
     <div class="slider round"></div> 
 
    </label> 
 
    </div> 
 
    <div id="div-yestext"> 
 
    Yes 
 
    </div> 
 
</div>

希望これはあなたが持っているディスプレイ兄弟のすべてに適用する必要が動作するように垂直方向の整列のために

Answer 2

に役立ちます：インラインブロック;このよう

：

#div-notext { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    display: inline-block; 
    vertical-align: middle; 
    border: solid; 
    width: 40px; 
} 

#div-switch { 
    border: solid; 
    display: inline-block; 
    vertical-align: middle; 
    width: 60px; 
} 

#div-yestext { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    display: inline-block; 
    vertical-align: middle; 
    border: solid; 
}