山东体彩十一选5
023-62822519
/
/
/
/
/
/
/
  • DIV文字内容垂直居中样式
  • 发布时间:2018-11-11 浏览次数:22次 作者:023web 来源:冒号网络

    单行文本,只需要将文本行高(line-height)和所在区域高度(height)设为一致即可:


    <!--html代码-->

        <div id="div1">

            这是单行文本垂直居中

        </div>


    /*css代码*/

    #div1{

        width: 300px;

        height: 100px;

        margin: 50px auto;

        border: 1px solid red;

        line-height: 100px; /*设置line-height与父级元素的height相等*/

        text-align: center; /*设置文本水平居中*/

        overflow: hidden; /*防止内容超出容器或者产生自动换行*/

    }


    多行文本垂直居中分为两种情况,一个是父级元素高度不固定,随着内容变化;另一个是父级元素高度固定。


    父级高度不固定的时,高度只能通过内部文本来撑开。这样,我们可以通过设置内填充(padding)的值来使文本看起来垂直居中,只需设置padding-top和padding-bottom的值相等:


    <!--html代码-->

        <div id="div1">

                这是多行文本垂直居中,

                这是多行文本垂直居中,

                这是多行文本垂直居中,

                这是多行文本垂直居中。

        </div>


    /*css代码*/

    #div1{

        width: 300px;

        margin: 50px auto;

        border: 1px solid red;

        text-align: center; /*设置文本水平居中*/

        padding: 50px 20px;

    }

    父级高度固定的时,设置父级div的display属性:display: table;;然后再添加一个div包含文本内容,设置其display:table-cell;和vertical-align:middle


    <!--html代码-->

        <div id="outer">

            <div id="middle">

                这是固定高度多行文本垂直居中,

                这是固定高度多行文本垂直居中,

                这是固定高度多行文本垂直居中,

                这是固定高度多行文本垂直居中。

            </div>

        </div>


    /*css代码*/

           #outer{

                width: 400px;

                height: 200px;

                margin: 50px auto;

                border: 1px solid red;

                display: table;

            }

           #middle{ 

                display:table-cell; 

                vertical-align:middle;  

                text-align: center; /*设置文本水平居中*/  

                width:100%;   

            }

    标签: CSS
    最新案例
    让价值共享,记录我们发展脚步,也让您获取的知识...
  • 重庆显固科技有限公司

    企业网站建设

    重庆显固科技有限公司
  • 开心木门-重庆宇心门业有限公司

    营销型网站建设

    开心木门-重庆宇心门业有限公司
  • 西南政法大学行政法学院

    企业网站建设

    西南政法大学行政法学院
  • 版权所有:重庆冒号网络科技有限公司 Copyright ? 2018-2019 山东体彩十一选5 www.nb6n0.com All Rights Reserved. 渝ICP备16001242号-1
    热门搜索词:重庆网站建设、网络营销推广
  • 023-62822519

    山东体彩十一选5

    返回顶部