關(guān)于居中對(duì)齊,之前有記錄了絕對(duì)定位、display: inline-block、margin-top和table-cell的幾種對(duì)齊方式,還可以用絕對(duì)定位和transform,如下圖:
這個(gè)是不需要固定的寬度和高度,設(shè)置translate成50%就可以了,它的偏移是根據(jù)元素的寬高的50%。
如果只是需要移動(dòng)端使用,用flex布局也很不錯(cuò),如下圖:
不過應(yīng)用于PC端就要考慮兼容性的問題了。
記了這么一些關(guān)于垂直居中的,關(guān)于水平居中,行內(nèi)元素例如span的要設(shè)置水平居中,需要在它的父元素設(shè)置text-align:center;
塊狀元素需要?jiǎng)澐质谴_定寬度和不確定寬度;確定寬度的塊狀元素需要設(shè)置margin:0 auto; margin的上下可以按自己需求設(shè)置。不確定寬度的塊狀元素,例如div,可以用table,把div放進(jìn)table的td里面,將table設(shè)置margin: 0 auto ;
或者采用另一方法,將不確定寬度的塊狀元素div設(shè)置display: inline; 改變類型,然后它的父級(jí)元素設(shè)置text-align:center;用來實(shí)現(xiàn)想要的效果。
如沒特殊注明,文章均為方維網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請注明來自http://m.oulysa.com/news/5525.html