css垂直居中

最新推荐文章于 2024-08-16 23:06:16 发布

A－万娇

最新推荐文章于 2024-08-16 23:06:16 发布

阅读量59

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_44910986/article/details/117532775

版权

一、多行文字垂直居中
1.父元素设置display:table，子元素设置display: table-cell;vertical-align: middle;

.middle-box{
        display: table; /*重点*/
        height: 300px;border: 1px solid #000;
    }
    /*重点：table-cell布局*/
    .middle-inner{
        display: table-cell;
        vertical-align:middle;
        text-align:center;
        height: 200px;
        border:1px solid #000;
    }
</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>

在这里插入图片描述

2.父元素设置display:table-cell, vertical-align:middle;

<style>  
        *{padding: 0;margin:0;font-size: 12px;}  
        div{display: table-cell;width: 200px;height:150px;border:1px solid blue;vertical-align: middle;}  
    </style>
    <div>  
        <span>测试文字测试文字</span>  
    </div>  
    <div>  
        测试文字测试文字  
    </div>  
    <div>  
        <p>测试文字测试文字</p>
        <p>测试文字测试文字</p>
    </div>

在这里插入图片描述
二、一个元素的垂直居中
https://blog.csdn.net/weixin_41305441/article/details/89886846
三、CSS的inline、block与inline-block
https://segmentfault.com/a/1190000015202771

A－万娇

关注

0
点赞
踩
0

收藏

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

一、多行文字垂直居中1.父元素设置display:table，子元素设置display: table-cell;vertical-align: middle;.middle-box{ display: table; /*重点*/ height: 300px;border: 1px solid #000; } /*重点：table-cell布局*/ .middle-inner{ display: table-cell;
复制链接

扫一扫