html5 - 这样的列表排版如何写比较好！

Question

手机页面！

图标互相对齐，文字居中对齐并与其它行文字对齐，红色圈金额（￥0.00）另起一行对齐！

希望贴出html和css代码

Answer 1

As shown in the picture, just make sure that the two black lines in the picture are aligned~~~

1. The icons are the same size, centered
2. The icon is the same size as the upper border, centered
3. The second line of text is the same size, the line-height is consistent, centered
4. The third line of text Same size, same line-height, centered

Answer 2

<ul>

<li>
    <p><img src="图片地址" /></p>
    <p>标题</p>
    <p>￥0.00</p>
</li>

//重复li,修改图片地址、标题名、金额，这些一般都是从后台返回一个字段给你。

</ul>
css style:
li{

text-align:center;

}

You should know how to write other styles yourself