元素垂直居中(块级元素、行内元素、图片、多行文本垂直居中)

今天来介绍各种元素垂直居中,很实用哦!

依然是先上图片哦,看好了,是不是有你需要的呢?

这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

行内元素垂直居中

  • 利用display: table-cell; vertical-align: middle; 行内元素不能设置宽高,只能靠元素内容撑开, 但是父元素要有宽高的哈,这种相对比较简单;
  • html
   <h2>1、子元素是行内元素</h2>
    <div class="big">
        <span class="small">我是行内元素span</span>
    </div>
  • css
.big{
            width: 800px;
            height: 600px;
            background: #cccccc;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .small{
            background: #e87965;
        }

块级元素垂直居中

  • 块级元素的话相对来说就更简单了,有很多种情况,利用margin,padding,position定位,会有很多种方法的,既然是块级元素了肯定宽高是要设置的,否则垂直居中的父子关系也就没什么意义了,随便写了一个相对简单的
  • html
<h2>/2、子元素是块级元素</h2>
    <div class="box">
        <div class="box_con">我是块级元素div</div>
    </div>
  • css
.box{
            width: 800px;
            height: 600px;
            background: #a4afc6;
            text-align: center;
            overflow: hidden;  /*如果不加这个属性,小心内边框凹陷哦*/
        }
        .box_con{
            width: 400px;
            height: 300px;
            margin: 150px auto;
            background: #e8351d;
        }

图片垂直居中

  • 这应该是碰到最多,最不好控制的了,因为大多数我们不想去限制img的宽高,又想让img垂直居中,呼呼,代码见吧
  • html
 <h2>3、子元素是图片</h2>
    <div class="big">
        <img src="../img/1.jpg" alt=""  title="我是块级元素img"/>
    </div>
  • css
   .big{
            width: 800px;
            height: 600px;
            background: #cccccc;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

-哈哈,其实跟行内元素是一样一样的哦,只是图片的大小不要超过他爸爸哦,否则。。。。

最后,多行文本垂直居中

  • 这个用的应该不是太多吧,但是这是display:table;和display:table-cell;的神奇功效,不能放过呢
  • html
 <h2>4、多行文本垂直居中</h2>
    <div class="par">
        <p class="son">天边的最后一抹斜阳,黯淡了,无尽的黑暗将要袭来。我陷入了沉思中去。
            日子一天一天地逝去,从满心不甘至无可奈何,最终落得个与世诀别。即使再不愿,也抵不过光阴的蹉跎,岁月的无情。似一支锋利的针,刺的多了,也便感觉不到疼了。只眼睁睁地盯着指里浸出的血红,一滴,一滴,禁锢了世界。
            “最是人间留不住,朱颜辞镜,花辞树。”从落地开始,便踏入一个无法回头的路程,通往世界的那头。无法静止,无法再来,上天仅予了世人一次机会,一次,不可多得、万般珍贵的机会。
            当然,现在的你,或许是豆蔻年华的少年,性格作风间,满是少年的意气风发,锋芒毕露,好比“少年不识愁滋味,爱上层楼,爱上层楼”“左牵黄,右擎苍”;或是初来乍到的中年人,不必前者,中年人,更加成熟稳重了,当然,也添了更多的责任,有自己的信念,需要去守护。但,时光流逝的匆匆,就有了“无可奈何花落去,似曾相识燕归来”的诗句;又或是已生皱纹,苍苍白发的老人,届时,离路程的尽头,离结束不远了。更多的,也是释然。“高堂明镜悲白发,朝如青丝暮成雪。”操劳了一生,也要停止了。
        </p>
    </div>
  • css
.par {
            display: table;
            width: 800px;
            height: 600px;
            text-align: center;
            padding: 0 150px;
            box-sizing: border-box;
            background: #156bff;
        }
        .son  {
            display: table-cell;
            background: #c0a2ff;
            vertical-align: middle;
        }
  • 子元素往往会100%宽高继承父级元素,所以如果想设置资源的占比小点的话,是需要给父级元素设置padding属性值的,当然,也要加上box-sizing:border-box;否则子元素会溢出哦。

    最后的最后,整篇代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .big{
            width: 800px;
            height: 600px;
            background: #cccccc;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .small{
            background: #e87965;
        }

        .box{
            width: 800px;
            height: 600px;
            background: #a4afc6;
            text-align: center;
            overflow: hidden;  /*如果不加这个属性,小心内边框凹陷哦*/
        }
        .box_con{
            width: 400px;
            height: 300px;
            margin: 150px auto;
            background: #e8351d;
        }
        .par {
            display: table;
            width: 800px;
            height: 600px;
            text-align: center;
            padding: 0 150px;
            box-sizing: border-box;
            background: #156bff;
        }
        .son  {
            width: 500px;
            display: table-cell;
            background: #c0a2ff;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div id="wrapper">
<!--子元素是行内元素-->
   <h2>1、子元素是行内元素</h2>
    <div class="big">
        <span class="small">我是行内元素span</span>
    </div>


<!--子元素是块级元素-->
    <h2>/2、子元素是块级元素</h2>
    <div class="box">
        <div class="box_con">我是块级元素div</div>
    </div>

 <!--子元素是图片-->
    <h2>3、子元素是图片</h2>
    <div class="big">
        <img src="../img/1.jpg" alt=""  title="我是块级元素img"/>
    </div>

    <h2>4、多行文本垂直居中</h2>
    <div class="par">
        <p class="son">天边的最后一抹斜阳,黯淡了,无尽的黑暗将要袭来。我陷入了沉思中去。
            日子一天一天地逝去,从满心不甘至无可奈何,最终落得个与世诀别。即使再不愿,也抵不过光阴的蹉跎,岁月的无情。似一支锋利的针,刺的多了,也便感觉不到疼了。只眼睁睁地盯着指里浸出的血红,一滴,一滴,禁锢了世界。
            “最是人间留不住,朱颜辞镜,花辞树。”从落地开始,便踏入一个无法回头的路程,通往世界的那头。无法静止,无法再来,上天仅予了世人一次机会,一次,不可多得、万般珍贵的机会。
            当然,现在的你,或许是豆蔻年华的少年,性格作风间,满是少年的意气风发,锋芒毕露,好比“少年不识愁滋味,爱上层楼,爱上层楼”“左牵黄,右擎苍”;或是初来乍到的中年人,不必前者,中年人,更加成熟稳重了,当然,也添了更多的责任,有自己的信念,需要去守护。但,时光流逝的匆匆,就有了“无可奈何花落去,似曾相识燕归来”的诗句;又或是已生皱纹,苍苍白发的老人,届时,离路程的尽头,离结束不远了。更多的,也是释然。“高堂明镜悲白发,朝如青丝暮成雪。”操劳了一生,也要停止了。
        </p>
    </div>

</div>
</body>
</html>
  • 4
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值