图标与文本

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

      

  主要利用

        

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

CSS:

.middle{

vertical-align:middle;

}

img{

margin: 1rem0;

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-itemimg{

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>