CSSトグルとテキストの整列

Question

CSSをテーマにしたテキストとトグルがあります。私は、トグルをテキストと垂直に整列させたいと思います。私は運がなくてもいくつかの方法を試しました。あなたが私に与えることができるすべての助けを感謝します。ありがとう！

.switch { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 17px; 
 
} 
 

 
.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: 13px; 
 
    width: 13px; 
 
    left: 2px; 
 
    bottom: 2px; 
 
    background-color: white; 
 
    -webkit-transition: .4s; 
 
    transition: .4s; 
 
} 
 

 
input:checked+.slider { 
 
    background-color: #651C0C; 
 
} 
 

 
input:focus+.slider { 
 
    box-shadow: 0 0 1px #2196F3; 
 
} 
 

 
input:checked+.slider:before { 
 
    -webkit-transform: translateX(13px); 
 
    -ms-transform: translateX(13px); 
 
    transform: translateX(13px); 
 
} 
 

 

 
/* Rounded sliders */ 
 

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

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

<h5>Reveal Links <label class="switch"><input type="checkbox" onchange="v30showall(this)"><div class="slider round"></div></label></h5>

Answer 1

あなたは垂直整列性がインラインレベル要素によって生成されたボックスの行ボックス内の垂直配置に影響を与えるvertical-align:middle;ルール

https://www.w3.org/wiki/CSS/Properties/vertical-align

を使用する必要があります。

.switch { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 17px; 
 
    vertical-align:middle; /* added */ 
 
} 
 

 
.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: 13px; 
 
    width: 13px; 
 
    left: 2px; 
 
    bottom: 2px; 
 
    background-color: white; 
 
    -webkit-transition: .4s; 
 
    transition: .4s; 
 
} 
 

 
input:checked+.slider { 
 
    background-color: #651C0C; 
 
} 
 

 
input:focus+.slider { 
 
    box-shadow: 0 0 1px #2196F3; 
 
} 
 

 
input:checked+.slider:before { 
 
    -webkit-transform: translateX(13px); 
 
    -ms-transform: translateX(13px); 
 
    transform: translateX(13px); 
 
} 
 

 

 
/* Rounded sliders */ 
 

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

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

<h5>Reveal Links <label class="switch"><input type="checkbox" onchange="v30showall(this)"><div class="slider round"></div></label></h5>

Answer 2

私は個人的にかなり.switchにdisplay: inline-blockを使用するよりも、（この場合は<span>で）Reveal Link独自のコンテナを与え、そして左に、それらの両方を浮動勧め：

h5 span { 
 
    float: left; 
 
} 
 

 
.switch { 
 
    position: relative; 
 
    float: left; 
 
    width: 30px; 
 
    height: 17px; 
 
} 
 

 
.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: 13px; 
 
    width: 13px; 
 
    left: 2px; 
 
    bottom: 2px; 
 
    background-color: white; 
 
    -webkit-transition: .4s; 
 
    transition: .4s; 
 
} 
 

 
input:checked+.slider { 
 
    background-color: #651C0C; 
 
} 
 

 
input:focus+.slider { 
 
    box-shadow: 0 0 1px #2196F3; 
 
} 
 

 
input:checked+.slider:before { 
 
    -webkit-transform: translateX(13px); 
 
    -ms-transform: translateX(13px); 
 
    transform: translateX(13px); 
 
} 
 

 

 
/* Rounded sliders */ 
 

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

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

<h5> 
 
    <span>Reveal Links</span> 
 
    <label class="switch"> 
 
    <input type="checkbox" onchange="v30showall(this)"> 
 
    <div class="slider round"></div> 
 
    </label> 
 
</h5>

希望のある方はこちらをご覧ください。 :)