元素总是居中且高度是宽度的一半

2024年2月4日 119次阅读 来源: 胡斐

有一个元素element, 实现如下需求：

  1. 元素e水平垂直居中
  2. 元素e水平方向与父元素保持10px间距
  3. 元素e的高度是宽度的一半
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>always-center</title>
</head>

<body>

    <div class="text-box">
        <h4>有一个元素element, 实现如下需求：</h4>
        <ul>
            <li>元素e水平垂直居中</li>
            <li>元素e水平方向与父元素保持10px间距</li>
            <li>元素e的高度是宽度的一半</li>
        </ul>
    </div>

    <style>
        html,
        body {
            height: 100%;
        }

        .element{
            position: absolute;
            margin: auto 10px;  /* 垂直方向不可定值 */
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;

            font-size: 24px;
        }

        .v-padding {
            padding-bottom: calc(50% - 10px);
            height: 0;
            background: #ddd;
        }
        .v-vw{
            height: calc( 50vw - 10px - ( 100vh - 100% ));
            background: #ccc;
        }

        .none{
            display: none;
        }

        .toggle{
            position: fixed;
            z-index: 1;
            top: 170px;
            left: 150px; 
        }

        .text-box {
            width: 400px;
            display: inline-block;
            font-size: 20px;
            position: relative;
            margin-bottom: 0;
        }
    </style>

    <button id="toggle" class="toggle"> toggle element </button>
    <div class="element none"> </div>


    <script>
        const toggle = document.getElementById('toggle');
        const cycles = [ 'v-padding', 'v-vw', 'none'];
        const element = document.querySelector('.element');
        toggle.addEventListener('click', ()=>{
            const current = cycles.shift();
            element.className = 'element '+current;
            element.innerText = current.replace('v-', '');
            cycles.push(current);
        });
    </script>



    <style>
        .padding-box {
            width: 300px;
            background: #BBB;
        }

        .padding-box .padding {
            padding: 10%;
            background: blue;
        }
    </style>

    <div class="padding-box">
        <p class="padding">
            padding 使用百分比时， 相对于父容器宽度进行计算。
        </p>
        
        <input type="range" name="padding" id="padding"> 调整父级元素宽度
    </div>
    <script>
        const r = document.getElementById('padding');
        const pbox = document.querySelector('.padding-box');
        r.addEventListener('input', () => {
            pbox.setAttribute('style', 'width: ' + (600 * r.value / 100) + 'px;');
        });
    </script>
</body>

</html>
    原文作者：胡斐
    原文地址: https://segmentfault.com/a/1190000018992730
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞