如何让div内的多行文本上下左右居中

最新推荐文章于 2023-01-02 14:59:08 发布

weixin_30699741

最新推荐文章于 2023-01-02 14:59:08 发布

阅读量782

点赞数 1

原文链接：http://www.cnblogs.com/xumqfaith/p/9149497.html

版权

　　1、首先，如果div中的文本特别少，不超过div宽度，那么这种就非常简单了，直接line-height等于height就可以了

　　　　<style type="text/css">
            #one{
                width: 200px;
                height: 200px;
                line-height: 200px;
                background: #FF9999;
                text-align: center;
            }
        </style>
        <div id="one">
                我是内容
        </div>

2、但是，在文本好多情况下，那么就会出现这种情况

GG了，如果div不是固定高度，使用padding是可以完美实现

    <style type="text/css">
            #one{
                width: 200px;
                padding: 100px 0;
                background: #FF9999;
                text-align: center;
                
            }
        </style>
    </head>
    <body>
            <div id="one">
                我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
            </div>
    </body>