首页 > 其他 > 详细

利用伪元素实现元素居中

时间:2018-01-06 13:45:57      阅读:219      评论:0      收藏:0      [点我收藏+]

效果:

技术分享图片

技术分享图片

代码:

<div class="test">
    <div class="testChild">ddddddddddddddddddddddddddddddddddddddddddd
         ddddddddddddddddddddddddddddddfffffffffffffffffffffffffffffffffffffff
           d</div>
</div>
.test{
    background:white;
    height:200px;
    width:200px;
    &:before{
        display:inline-block;
        vertical-align:middle;
        content:‘‘;
        height:100%;
    }
    .testChild{
        width:100%;
        word-break:break-all;
        display:inline-block;
        vertical-align:middle;//通过display:inline-block;和vertical:middle;让元素跟这个伪元素对齐
        color:red;
    }
}

效果:

技术分享图片

代码:

<div class="test">
     <div class="testChild2"></div>
</div>
.test{
    background:white;
    height:200px;
    width:200px;
    &:before{
        display:inline-block;
        vertical-align:middle;
        content:‘‘;
        height:100%;
    }
    .testChild2{
        width:30px;
        height:30px;
        background:red;
        display:inline-block;
        vertical-align:middle;
    }
}

 技术分享图片

<div class="test">
     <div class="testChild2"></div>&nbsp;<div class="testChild2"></div>
</div>

 只有inline-block,inline还有table的东西能用vertical-align这个属性

利用伪元素实现元素居中

原文:https://www.cnblogs.com/rachelch/p/8213514.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!