Question

我正在尝试找到具有CSS属性的最简单方法，以使我的类似iOS的切换按钮垂直对齐，以使其美观。.
我不想使用第二个div-容器。我只想将div.switch-btn :::移到.switch-btn

的中间

<!DOCTYPE html>
    <html>
    <title>iOS Toogle Switch</title>
    <style>
    .switch{
        opacity: 0;
    }

    .switch-btn{
        width: 80px;
        height: 20px;
        background: #e5e5e5;
        position: relative;
        border-radius: 20px;
        box-shadow: inset 0 3px 10px rgba(0,0,0,.3);
    }

    .switch-btn:before{
        content: "";
        position: absolute;
        height: 36px;
        width: 36px;
        background: linear-gradient(#FFF, #f2f2f2);
        left: 2px;
        top: 2px;
        transition: all 250ms ease-out;
        cursor: pointer;
        border-radius: 50%;
        box-shadow: 0 8px 6px -4px rgba(0,0,0,.25);
    }

    input[type=checkbox]:checked + .switch-btn {
        background: #47CB8F;
    }

    input[type=checkbox]:checked + .switch-btn:before {
        left: 42px;
    }

    </style>
        <body>
        <label class="switch">
            <input type ="checkbox"/>
            <div class="switch-btn"></div>
        </label>

        <script>

        </script>   
        </body>
    </html>

Answer 1

https://jsfiddle.net/2ehmwta3/

.switch-btn:before {
    /* ... */
    top: 50%;
    transform: translateY(-50%);
    /* ... */
}

即使目标DOM大于父元素，也想在垂直居中放置内容时，都应设置transform属性。

说明

.switch-btn:before的高度为36px，但是您给了top: 2px，它仅比父DOM对象（switch-btn）的最高位置向下移动了2个像素。

所以我给了top: 50%，它将.switch-btn:before放置在距最高位置10个像素处，因为您知道20 (the height of '.switch-btn') * 50% = 10。

，并且重要的部分是transform: translateY(-50%)。这使DOM的移动量达到其自身高度的一半。因此.switch-btn:before将向上移动18个像素。

带CSS的iOS拨动开关

1 个答案: