vertical-align垂直居中

    <div id="content">
        <div id="weizi">
            锄禾日当午,<br>
            汗滴禾下土。<br>
            谁知盘中餐,<br>
            粒粒皆辛苦。<br>
        </div>
    </div>
        #content{
            width: 300px;
            height: 300px;
            border: #000 solid 1px;
            margin: auto;
        }
        #weizi{
            border: #000 solid 1px;
            text-align: center;
            vertical-align: middle;
        }

单独写vertical-align: middle不会有垂直居中的效果

例:

        #con::before{
            content: "";
            width: 25px;
            height: 25px;
            background: url(camera.png) no-repeat;
            background-size: 25px 25px;
            display: inline-block;
            vertical-align: middle;
            margin: -1px 5px 5px 5px;
        }
        #con::after{
            content: "";
            width: 25px;
            height: 25px;
            background: url(search.png) no-repeat;
            background-size: 25px 25px;
            display: inline-block;
            vertical-align: middle;
            margin: -1px 5px 5px 5px;
        }

这个之所以有效果因为vertical-align:middle;配合display: inline-block;使用。

我们发现只有表格的时候垂直居中是管用的,只需在子元素加一个display:table-cell;表格单元格显示,父元素加display:table;

        #content{
            width: 300px;
            height: 300px;
            border: #000 solid 1px;
            margin: auto;
            display: table;
        }
        #weizi{
            border: #000 solid 1px;
            text-align: center;
            vertical-align: middle;
            display:table-cell;
        }

 

转载于:https://www.cnblogs.com/qingyang-0-0/p/9394955.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值