將CSS切換與文本對齊

我有一些文本和以CSS爲主題的切換。我希望切換與文本垂直對齊。我嘗試了幾種方法，沒有任何運氣。感謝您可以給我的任何幫助。謝謝！將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>

來源

2017-07-10 Sean FromPA

您需要使用vertical-align:middle;規則

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

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

來源

2017-07-10 20:48:18

完美和簡單的修復。非常感謝。 –

我個人建議您爲Reveal Link其自己的容器（在這種情況下<span>）和浮動這兩個的左側，而不是在.switch使用display: inline-block：

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>

希望這有助於！ :)

來源

2017-07-10 20:46:27

感謝您抽出時間來回答。這裏的麻煩是我也希望他們居中。我應該在問題中提到這一點。 –

將CSS切換與文本對齊

回答

相關問題