我最近接觸小程序,發(fā)現(xiàn)感覺一些資料是最常用的 ,就分享出來啦 希望對你們有幫助
1.flex流布局
使用屬性:
justify-content:center;
align-items:center;
*/justify-content 決定項(xiàng)目在主軸上的對齊方式
align-items 決定項(xiàng)目在交叉軸上的對齊方式
改變布局的橫縱軸后控制水平和垂直對齊方式的屬性改變,但控制主軸或交叉軸的對齊方式的屬性不改變。*/
2.一般布局,或者modal模態(tài)彈出框
使用屬性:
vertical-align: middle;
或
使用屬性:
text-align:center;
align-items:center;
*text-align為水平對齊方式。用于塊級元素上,設(shè)置塊級元素的內(nèi)聯(lián)元素的對齊方式。
3.塊級元素
width:400px;
margin-left:auto;
margin-right:right;
設(shè)置元素的寬度值,并令左右外邊距值為auto,瀏覽器會自動為其分配相同的左右外邊距值,使其居中顯示。
4.圖片居中
方法1.將放置圖片的容器的布局改為
display: table-cell; text-align: center;
可以使容器內(nèi)的元素均居中顯示。效果如下:

如果需要水平垂直居中,添加
display: table-cell; text-align: center; vertical-align: middle;
效果如下:

遠(yuǎn)近互聯(lián)后端小秦整理發(fā)布,希望能對學(xué)習(xí)技術(shù)的你有所幫助
遠(yuǎn)近互聯(lián)專業(yè)提供網(wǎng)站建設(shè)、APP開發(fā)、網(wǎng)站優(yōu)化、外貿(mào)網(wǎng)站SEO、微信運(yùn)營的品牌整合營銷服務(wù)讓客戶通過網(wǎng)絡(luò)品牌建立與網(wǎng)絡(luò)傳播提高業(yè)績。






