元素總是居中且高度是寬度的一半

awokezhou 發(fā)布于2019-08-29 18:43 / 633人閱讀

有一個(gè)元素element, 實(shí)現(xiàn)如下需求：

元素e水平垂直居中

元素e水平方向與父元素保持10px間距

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





    
    
    
    always-center




    
        有一個(gè)元素element, 實(shí)現(xiàn)如下需求：
        
            元素e水平垂直居中
            元素e水平方向與父元素保持10px間距
            元素e的高度是寬度的一半
        
    

    

    
     


    



    

    
        
            padding 使用百分比時(shí)， 相對(duì)于父容器寬度進(jìn)行計(jì)算。
        
        
         調(diào)整父級(jí)元素寬度

云服務(wù)器 GPU云服務(wù)器寬度高度屏幕高度寬度 html寬度高度 html寬度元素

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114525.html

相關(guān)文章

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

摘要：并排顯示，要求相同高度如果要求多個(gè)塊級(jí)元素并排居中且高度相同，則要為其父元素設(shè)置屬性。成一列顯示如果只是需要讓多個(gè)塊級(jí)元素整體水平居中，并且按默認(rèn)的方式縱向排列，那直接設(shè)置左右邊距為即可。原文出處：Centering in CSS: A Complete Guide 本文只給出了不同條件下的實(shí)現(xiàn)方式，未對(duì)原理做探討。PS：原來(lái)要顯示 jsfiddle 和 CodePen 之類網(wǎng)站的代...

wayneli 2019-08-30 13:04 評(píng)論0 收藏0
主流的CSS水平和垂直居中技術(shù)大全

摘要：水平居中行內(nèi)元素的水平居中在父元素中設(shè)置只對(duì)內(nèi)聯(lián)元素或行內(nèi)塊元素有效需要放置于父元素中塊級(jí)元素的水平居中只對(duì)塊級(jí)元素有效指的是自適應(yīng)寬度。參考張?chǎng)涡駥?shí)現(xiàn)絕對(duì)定位元素的居中及原理居中方式水平居中垂直居中塊級(jí)元素設(shè)置內(nèi)聯(lián)元素設(shè)置。原文地址：https://www.xksblog.top/CSS-mainstream-centering-techniques.html 幾個(gè)月也零零散散學(xué)...

KoreyLee 2019-08-29 16:26 評(píng)論0 收藏0
CSS居中完全指南——構(gòu)建CSS居中決策樹(shù)

摘要：但是部分瀏覽器存在兼容性的問(wèn)題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹(shù) showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹(shù),下次再遇到...

cc17 2019-08-02 10:11 評(píng)論0 收藏0
CSS居中完全指南——構(gòu)建CSS居中決策樹(shù)

摘要：但是部分瀏覽器存在兼容性的問(wèn)題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹(shù) showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹(shù),下次再遇到...

AlienZHOU 2019-08-30 15:53 評(píng)論0 收藏0
CSS居中完整版

摘要：塊級(jí)元素對(duì)于塊級(jí)元素，可以通過(guò)設(shè)置他的屬性為來(lái)達(dá)到居中的效果。與其它情況不同，這個(gè)是用來(lái)處理一行內(nèi)的元素居中的。在包含塊里放置一個(gè)高度為的偽元素，這樣，文本就居中了。翻譯自https://css-tricks.com/centering-css-com... 我將原作者的代碼整理成了Github Repo，并且在持續(xù)更新使用CSS居中的方法，歡迎fork和star我的項(xiàng)目css-ce...

TIGERB 2019-08-30 12:55 評(píng)論0 收藏0