国产精品一区二区三区……-大杳蕉伊人欧美一本遒在饯-日本不卡一区免费在线观看-国产亚洲欧美中文字幕

400-800-9385
網(wǎng)站建設(shè)資訊詳細

網(wǎng)頁前端切圖之居中對齊方式

發(fā)表日期:2020-01-18 09:24:16   作者來源:林志平   瀏覽:3249   標(biāo)簽:網(wǎng)頁前端切圖    
關(guān)于居中對齊,之前有記錄了絕對定位、display: inline-block、margin-top和table-cell的幾種對齊方式,還可以用絕對定位和transform,如下圖:

代碼1


這個是不需要固定的寬度和高度,設(shè)置translate成50%就可以了,它的偏移是根據(jù)元素的寬高的50%。
如果只是需要移動端使用,用flex布局也很不錯,如下圖:
 

代碼2

不過應(yīng)用于PC端就要考慮兼容性的問題了。
記了這么一些關(guān)于垂直居中的,關(guān)于水平居中,行內(nèi)元素例如span的要設(shè)置水平居中,需要在它的父元素設(shè)置text-align:center;
塊狀元素需要劃分是確定寬度和不確定寬度;確定寬度的塊狀元素需要設(shè)置margin:0 auto; margin的上下可以按自己需求設(shè)置。不確定寬度的塊狀元素,例如div,可以用table,把div放進table的td里面,將table設(shè)置margin: 0 auto ;
或者采用另一方法,將不確定寬度的塊狀元素div設(shè)置display: inline; 改變類型,然后它的父級元素設(shè)置text-align:center;用來實現(xiàn)想要的效果。
如沒特殊注明,文章均為方維網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請注明來自http://pdcharm.com/news/5525.html
威海市| 习水县| 台北市| 江口县| 张家口市| 长宁区| 阳东县| 望谟县| 合江县| 五河县| 吴桥县| 夹江县| 宜丰县| 保亭| 盐边县| 巴东县| 高雄县| 美姑县| 通辽市| 遵义市| 本溪市| 府谷县| 四平市| 安义县| 鄂州市| 大关县| 建水县| 柞水县| 时尚| 家居| 锡林郭勒盟| 潼关县| 云林县| 清镇市| 蕲春县| 清苑县| 阿拉善右旗| 凤山县| 胶南市| 诸暨市| 桃园市|