div中宽高度自适应文字换行居中问题解决

本文转载自查看原文 2019-11-25 13:13 465 问题板块/ 文本换行居中/ 宽高度自适应居中

<html>
    <head>
        <meta charset="UTF-8"/>
        <title>div中宽高度自适应文字换行居中demo</title>
    </head>
    <style type="text/css">
        .fatherbox{
            width: 200px;
            height: 300px;
            text-align: center;
            /* start 以下为样式内容，不重要*/
            border: 1px solid red;
            background: green;
            /* end 以上为样式内容，不重要*/
        }
        .childbox1{
            display: inline-block;
            vertical-align: middle;
            /* start 以下为样式内容，不重要*/
            background: blue;
            color: #fff;
            padding: 10px;
            /* end 以上为样式内容，不重要*/
        }
        .childbox2{
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }
    </style>
    <body>
        <div class="fatherbox">
            <div class="childbox1">
                我是居中内容1<br/>
                我是居中内容1<br/>
                我是居中内容1<br/>
                我是居中内容1
            </div>
            <div class="childbox2"></div>
        </div>
    </body>
</html>

div中宽高度自适应文字换行居中demo实现

我是居中内容1
我是居中内容1
我是居中内容1
我是居中内容1

原文出自：https://www.iteye.com/blog/fp-moon-1150774

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 如何让高度自适应的div中的文字水平垂直居中移动端flex布局高度自适应问题解决 div根据内容高度自适应地调整高度 H5 背景图片自适应屏幕问题解决办法包裹iframe的div与iframe存在高度差的问题解决方案 CSS实现div高度自适应 div高度自适应填充剩余部分 css实现div中图片高度自适应并与父级div宽度一致怎么让div宽度自适应文字内容？ div 自适应高度自动填充剩余高度