Scenario 1: Icons, text aligned vertically
main use
vertical-align:middle, for more properties, please refer to
click to open the link
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"
>
WeChat Moments
</
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
>