css3子级高度与父级同高，内容垂直居中

最新推荐文章于 2023-01-02 23:43:49 发布

转载最新推荐文章于 2023-01-02 23:43:49 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Enid0044/p/7521784.html

本文介绍了一种使用CSS实现的特殊布局效果：左侧固定宽度并居中显示的文字，右侧为列表项并带有特定样式。通过绝对定位和浮动等CSS属性实现了美观且响应式的网页布局。

 1 .E-wrap{
 2             overflow: hidden;
 3             position: relative;
 4             border: 1px solid #ccc;
 5             margin: 30px auto 0;
 6             width: 500px;
 7         }
 8         .E-left{
 9             position: absolute;
10             left: 0;
11             bottom: 0;
12             top: 0;
13             right: 80%;
14             border-right: 1px solid #ccc;
15             
16         }
17         .E-left li{
18             display: table;
19             width: 100%;
20             height:100%;
21         }
22         .E-left li p{
23             display: table-cell;
24             vertical-align: middle;
25             text-align: center;
26         }
27         .E-rihgt{
28             float: right;
29             width: 80%;
30         }
31         .E-rihgt li{
32             height: 40px;
33             line-height: 40px;
34             text-align: center;
35             border-bottom: 1px solid #ccc;
36         }
37         .E-rihgt li:last-child{
38             border-bottom:none;
39         }

<section class='E-wrap'>
    <ul class='E-left'>
        <li>
            <p>左侧文字</p>
        </li>
    </ul>
    <ul class='E-rihgt'>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>


</section>

效果图

转载于:https://www.cnblogs.com/Enid0044/p/7521784.html