元素总是居中且高度是宽度的一半

awokezhou 发布于2019-08-29 18:43 / 599人阅读

有一个元素element, 实现如下需求：

元素e水平垂直居中

元素e水平方向与父元素保持10px间距

元素e的高度是宽度的一半





    
    
    
    always-center




    
        有一个元素element, 实现如下需求：
        
            元素e水平垂直居中
            元素e水平方向与父元素保持10px间距
            元素e的高度是宽度的一半
        
    

    

    
     


    



    

    
        
            padding 使用百分比时， 相对于父容器宽度进行计算。
        
        
         调整父级元素宽度

云服务器 GPU云服务器宽度高度屏幕高度宽度 html宽度高度 html宽度元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114525.html

[译]CSS 居中（Center）方法大合集

摘要：并排显示，要求相同高度如果要求多个块级元素并排居中且高度相同，则要为其父元素设置属性。成一列显示如果只是需要让多个块级元素整体水平居中，并且按默认的方式纵向排列，那直接设置左右边距为即可。原文出处：Centering in CSS: A Complete Guide 本文只给出了不同条件下的实现方式，未对原理做探讨。PS：原来要显示 jsfiddle 和 CodePen 之类网站的代...

wayneli 2019-08-30 13:04 评论0 收藏0
主流的CSS水平和垂直居中技术大全

摘要：水平居中行内元素的水平居中在父元素中设置只对内联元素或行内块元素有效需要放置于父元素中块级元素的水平居中只对块级元素有效指的是自适应宽度。参考张鑫旭实现绝对定位元素的居中及原理居中方式水平居中垂直居中块级元素设置内联元素设置。原文地址：https://www.xksblog.top/CSS-mainstream-centering-techniques.html 几个月也零零散散学...

KoreyLee 2019-08-29 16:26 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

cc17 2019-08-02 10:11 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

AlienZHOU 2019-08-30 15:53 评论0 收藏0
CSS居中完整版

摘要：块级元素对于块级元素，可以通过设置他的属性为来达到居中的效果。与其它情况不同，这个是用来处理一行内的元素居中的。在包含块里放置一个高度为的伪元素，这样，文本就居中了。翻译自https://css-tricks.com/centering-css-com... 我将原作者的代码整理成了Github Repo，并且在持续更新使用CSS居中的方法，欢迎fork和star我的项目css-ce...

TIGERB 2019-08-30 12:55 评论0 收藏0