023-67990117    13452168070  
/
/
/
/
/
/
/

DIV文字内容垂直居中样式

发布时间:2018-11-11 浏览次数:234次 作者: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 www.023web.com All Rights Reserved. ICP备案编号:渝ICP备19011369号-2
    热门搜索词:重庆网站建设,重庆网站制作,重庆网站设计
  • 023-67990117

    954560575

    返回顶部