单行及多行文本垂直居中问题

1,058 阅读1分钟

记下小本本,不然下次又忘了。。。

  1. 单行文本垂直居中一般line-height就ok了
  2. 多行文本垂直居中可设置父级元素display:table,然后要居中的这些元素设置display:table-cell;vertical-align: middle;
    vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式 方法多又多,这次先记下这种吧(゜-゜)つロ
 <footer>
        <div class="blue_bg">联系我们 | 网站声明 | 广告合作</div>
        <div class="footer_bottom">
            <div class="cell"><p>鄂ICP备05011509号 水利部长江水利委员会主办 长江委宣传出版中心制作维护</p>
                <p>新闻线索:027-82927755 电话总机:027-82828114 投稿信箱:cjslw@126.com</p>
            </div>
            
        </div>
    </footer>
    footer{
    width:100%;
}
footer .blue_bg{
    height:40px;
    background-color: #304b5e;

    font-size: 1em;
    color:#fff;
    line-height: 40px;
    text-align: center;/*关键语句  水平居中*/
    cursor: pointer;
}
footer .footer_bottom{
    width:100%;
    height:100px;
    background-color: #f3f3f3;
    font-size:1em;
    display:table;/*关键语句*/
    
    text-align: center;
}
.cell{
    display: table-cell;/*关键语句*/
    vertical-align: middle;/*关键语句  垂直居中*/
}