图标与文本

     情景一：图标，文本垂直对齐

      

  主要利用

        

vertical-align:middle, 更多属性请参考 点击打开链接

CSS:

. middle{

vertical-align: middle;

}

img{

margin: 1rem 0;

font-size: 2.0vw !important;

width: 9.72vw;

height: 9.72vw;

}

html:

< div >

< img src= "{{mineItem.icon}}" class= "middle" >微信朋友圈

</ div >

情景二：图标上，文字下，水平居中：

主要是利用  text-align: center; text-align同时对img 和文本都有效

css:

.share-item{

text-align: center;

-webkit-flex: 1;

}

.share-item img{

margin: 1rem 0;

font-size: 2.0vw !important;

width: 9.72vw;

height: 9.72vw;

}

HTML:

< li class= "share-item" * ngFor= "let mineItem of shareList" ( click)= "shareItemClick(mineItem)" >

< div >

< img src= "{{mineItem.icon}}" >

< p >微信好友 </ p >

</ div >

</ li >