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中的文字水平垂直居中 div中iframe高度自適應問題移動端flex布局高度自適應問題解決四種方法解決DIV高度自適應問題怎么可以讓div自適應屏幕的高度？（已解決） div高度自適應 Vue中div高度自適應 Vue中div高度自適應 Vue中div高度自適應 EasyUI datagrid自適應問題解決