在前端設(shè)計(jì)中，經(jīng)常會(huì)有不少的小伙伴們遇到排版方面的問題，像是元素居中一類的問題。對(duì)于塊級(jí)別元素只需要margin:0 auto就可以解決，對(duì)于行內(nèi)元素text-align:center也能解決，但是如果是不定寬度的塊級(jí)別元素呢？今天文匯軟件小編就來和大家分享一下這方面的問題。
首先我們來看小編之前遇到的案例，如下圖所示：
像是這里的字如果想要居中一般有三種辦法：
第一種,指定寬度，讓其居中，這里因?yàn)槲覀冞€要做程序調(diào)用，里面字的數(shù)量是不固定的所以直接pass掉；
第二種：使用center標(biāo)簽；但是這里因?yàn)槭怯袃蓚€(gè)不同的字段一個(gè)是發(fā)布人，一個(gè)是發(fā)布時(shí)間，且使用center內(nèi)部不可以再出現(xiàn)其他標(biāo)簽，否則無法居中，所以這個(gè)也不行。
第三種方法：給父元素設(shè)置 float，然后給父元素設(shè)置 position:relative 和 left:50%，子元素設(shè)置 position:relative 和 left: -50% 來實(shí)現(xiàn)水平居中。這樣的好處是既保證了程序可以調(diào)用不同的字段，而且無論寫多少內(nèi)容都會(huì)居中。如下圖：
下圖紅框代表樣式，藍(lán)框代表可以調(diào)取的不同字段。
是不是覺得小編的分享很使用呢，實(shí)用的話就來文匯軟件關(guān)注小編吧。
下一篇： swiper2的使用方法
