css多行垂直居中

讨口子

已于 2022-05-20 11:43:39 修改

阅读量237

点赞数

文章标签： css 前端 css3

于 2020-12-05 16:43:49 首次发布

原文链接：https://www.cnblogs.com/goloving/p/7657544.html

版权

父元素高度固定，如何使其中的文字垂直居中？

利用display:table;加上display:table-cell;的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .middle-box{
        display: table; /*重点*/
        height: 300px;
        border: 1px solid #000;
    }
    /*重点：table-cell布局*/
    .middle-inner{
        display: table-cell;
        vertical-align:middle;
        text-align:center;
    }
</style>
<body>
<div class="middle-box">
    <div class="middle-inner">
        <p><span class="suc-tip">前端开发博客，专注前端开发和web教程</span><br/><span class="suc-link">快捷入口：<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
        <p style=""><span class="suc-tip">5年的老博客，一直致力于WEB开发</span></p>
    </div>
</div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

讨口子

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css多行垂直居中

父元素高度固定，如何使其中的文字垂直居中？利用display:table;加上display:table-cell的方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .middle-box{ display: tab
复制链接

扫一扫