高度不固定時(shí)垂直居中

VEIGHTZ 發(fā)布于2019-08-29 12:49 / 834人閱讀

摘要：語言表達(dá)能力有限，直接上圖。我想做的效果就是左側(cè)是導(dǎo)航標(biāo)題，右側(cè)是對(duì)應(yīng)的內(nèi)容條目。但是右側(cè)內(nèi)容條目數(shù)目不固定，因此對(duì)應(yīng)的高度也不固定。這效果看似簡(jiǎn)單，但本人半天沒想出來，苦讀一天文檔，終于找到解決方案寫的。

語言表達(dá)能力有限，直接上圖。我想做的效果就是左側(cè)是導(dǎo)航標(biāo)題，右側(cè)是對(duì)應(yīng)的內(nèi)容條目。
但是右側(cè)內(nèi)容條目數(shù)目不固定，因此對(duì)應(yīng)的高度也不固定。這效果看似簡(jiǎn)單，但本人半天沒想出來，苦讀一天文檔，終于找到解決方案(angularjs寫的)。



    
        {{item.GroupName}}>
    
    
        
            {{keytype.KeyTypeName}}

云服務(wù)器 GPU云服務(wù)器固定垂直居中垂直居中實(shí)現(xiàn)垂直居中水平垂直居中

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

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

相關(guān)文章

16種水平居中垂直居中方法

摘要：原文鏈接水平居中若是行內(nèi)元素給其父元素設(shè)置即可實(shí)現(xiàn)行內(nèi)元素水平居中若是塊級(jí)元素該元素設(shè)置即可若子元素包含屬性為了讓子元素水平居中則可讓父元素寬度設(shè)置為并且配合作如下設(shè)置是中給屬性新加的一個(gè)屬性值它配合可以輕松實(shí)現(xiàn)水平居中原文鏈接水平居中 1) 若是行內(nèi)元素, 給其父元素設(shè)置 text-align:center,即可實(shí)現(xiàn)行內(nèi)元素水平居中.2) 若是塊級(jí)元素, 該元素設(shè)置 margin...

jerry 2019-08-30 15:54 評(píng)論0 收藏0
vertical-align以及利用 vertical-align 實(shí)現(xiàn)垂直居中

摘要：在中實(shí)現(xiàn)垂直居中很多時(shí)候會(huì)用到，不過我一直對(duì)的使用糊里糊涂，現(xiàn)在整理一下關(guān)于它的一些知識(shí)點(diǎn)。將盒子的垂直中心點(diǎn)與父級(jí)盒子基線往上一半高度的位置對(duì)齊。時(shí)位置與設(shè)置一致。我們可以將設(shè)為來讓元素完全垂直居中。在 css 中實(shí)現(xiàn)垂直居中很多時(shí)候會(huì)用到 vertical-align ，不過我一直對(duì) vertical-align 的使用糊里糊涂，現(xiàn)在整理一下關(guān)于它的一些知識(shí)點(diǎn)。原文鏈接 1. 適...

lscho 2019-08-30 15:52 評(píng)論0 收藏0
vertical-align以及利用 vertical-align 實(shí)現(xiàn)垂直居中

摘要：在中實(shí)現(xiàn)垂直居中很多時(shí)候會(huì)用到，不過我一直對(duì)的使用糊里糊涂，現(xiàn)在整理一下關(guān)于它的一些知識(shí)點(diǎn)。將盒子的垂直中心點(diǎn)與父級(jí)盒子基線往上一半高度的位置對(duì)齊。時(shí)位置與設(shè)置一致。我們可以將設(shè)為來讓元素完全垂直居中。在 css 中實(shí)現(xiàn)垂直居中很多時(shí)候會(huì)用到 vertical-align ，不過我一直對(duì) vertical-align 的使用糊里糊涂，現(xiàn)在整理一下關(guān)于它的一些知識(shí)點(diǎn)。原文鏈接 1. 適...

madthumb 2019-08-01 16:13 評(píng)論0 收藏0
CSS居中完全指南——構(gòu)建CSS居中決策樹

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

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

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

AlienZHOU 2019-08-30 15:53 評(píng)論0 收藏0