js：使动态段落高度一致并且内容水平垂直居中

一些小东西，记下。

想实现效果：p高度由内容撑开，内容为动态数据（此处为静态不一致内容，代替数据库取到的数据）的情况下达到p标签始终同最高的高度一致，并且内容居中显示。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .Wd{
            width: 400px;
            /*块级元素内垂直居中*/
            align-items:center;
            /*伸缩盒 */
            display: -webkit-flex;
            /*块级元素内水平居中*/
            justify-content:center; 
        }
        div{
            border: 1px solid orange;
            width: 410px;
            margin-bottom: 10px;
            margin-left: 200px;
        }
    </style>
</head>
<body>
    <div>
        <p class="Wd">今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四今天是周四</p>
    </div>
    <div>
        <p class="Wd">今天是周四今天是周</p>
    </div>
    <div>
        <p class="Wd">今天是周四今天今周四今天是周四</p>
    </div>
    <div>
        <p class="Wd">今天是周四今天是四今天是周四</p>
    </div>
    <div>
        <p class="Wd">今天是周四今天周四今天今天是周四今天是周四</p>
    </div>
    <div>
        <p class="Wd">今天是周四今天是周四今天是周四</p>
    </div>
    </div>    
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

<script>
    var getH = document.getElementsByClassName("Wd");
    
    var list = [];

    for(var i = 0 ; i < getH.length; i++){
        
        list.push(getH[i].clientHeight);  //获取每个p标签的高度
    }
    list.sort(function(a,b){
        return b-a;
    })


    var large = list[0];
    $("p").css({
        "height":large
    })
</script>
</html>

js：使动态段落高度一致并且内容水平垂直居中

代码：

推荐阅读更多精彩内容