• 国外小哥COS卡卡西完美还原 2019-04-12
  • 东西方坦克大赛PK 到底谁家的赛制更实战? 2019-03-31
  • 新疆萌妹子特警蹿红网络 公开择偶标准[组图] 2019-03-31
  • 上海明确市级机关培训费标准 院士讲课费半天不超3000元 2019-03-29
  • 唯物辩证法是以客观事实为依据的,不是按什么理论为依据,人们的争论,就是从客观来证明理论的真伪,你给人家戴上有色眼镜,别人还怎么实事求是? 2019-03-26
  • 公婆儿媳争讨房租租客不知给谁 司法所介入调解 2019-03-26
  • 俞正声:加强和改进民主监督工作 2019-03-07
  • 山东体彩十一选5
    023-62822519
    /
    /
    /
    /
    /
    /
    /
  • DIV文字内容垂直居中样式
  • 发布时间:2018-11-11 浏览次数:55次 作者: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

    返回顶部

  • 国外小哥COS卡卡西完美还原 2019-04-12
  • 东西方坦克大赛PK 到底谁家的赛制更实战? 2019-03-31
  • 新疆萌妹子特警蹿红网络 公开择偶标准[组图] 2019-03-31
  • 上海明确市级机关培训费标准 院士讲课费半天不超3000元 2019-03-29
  • 唯物辩证法是以客观事实为依据的,不是按什么理论为依据,人们的争论,就是从客观来证明理论的真伪,你给人家戴上有色眼镜,别人还怎么实事求是? 2019-03-26
  • 公婆儿媳争讨房租租客不知给谁 司法所介入调解 2019-03-26
  • 俞正声:加强和改进民主监督工作 2019-03-07