css 左边元素和右边元素一样高,垂直居中如何实现呢?

css 左边元素和右边元素一样高,垂直居中如何实现呢?
效果图

clipboard.png

这个危害因素的高度要和 后面文字的元素一样高
就想这样

clipboard.png

文字是后台传递的,所以文字多少是不可控的
现在我的样式是

    .ul_one{
            width: 100%;
            color: #797979;
            li{
                background: #FFFFFF;
                .div_one{//就是现在看到的每一行
                    line-height: 2.9rem;
                    height: 100%;
                    border-bottom:1px solid #f4f4f4;
                    overflow:hidden;
                    span{
                        display: inline-block;
                        float: left;
                    }
                    span:nth-child(1){//现在看到左边的名字
                        display: block;
                        height: 100%;
                        width: 30%;
                        background: #A6E5DA;
                        text-align: center;
                        overflow: hidden;
                        word-break: break-all;
                    }
                    span:nth-child(2){//现在看到右边的名字
                            width: 60%;
                            padding-left: .9rem;
                            text-align: justify;
                            float: left;
                            height: auto;
                            word-break: break-all;
                    }
                }
            
            
            }
            
            
        }

我在网上搜索给 span:nth-child(1){}加了

                   `   padding-bottom: 9999px;
                    margin-bottom: -9999px;
                    vertical-align: middle;`
可以实现为

clipboard.png

但是怎么垂直居中呢?

阅读 1k
评论
    6 个回答
    • 2.1k

    这个可以归类为多列等高问题。在你这里其实要实现两列等高,并不一定是高度的完全一致,只是左右两列颜色所占空间高度看上去一致。
    你上面给出的解法算是一种,还有其他一些巧妙的解法,可以戳这个DEMO看看:

    6种实现多列等高的方法


    另外,更多有趣的 CSS 问题解法可以戳这里看看:https://github.com/chokcoco/C...

      相似问题
      推荐文章