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

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

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

元素e水平垂直居中

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

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





    
    
    
    always-center




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

    

    
     


    



    

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/114525.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

TIGERB 2019-08-30 12:55 評論0 收藏0