图片与文字上下对齐

2017-11-09

简单几行代码，轻松实现

在浏览网站，尤其是移动端电商网站的时候，经常会看到如下图片与文字对齐的情况

平时开发类似的页面时，可以用简单的img、div、span、a等标签进行布局，再通过调整CSS样式，可以达到这种效果。

其实在html5的新标签中，有专门为实现这种效果的标签，相信很多人都用过，那就是dl、dt、dd，而且用起来非常简单。

<div style="width:100px; margin:100px auto; text-align:center; font-size:14px;">
    <dl>
        <dt><img src="图片路径"></dt>
        <dd>风控短信<dd>
    </dl>
</div>

呈现的效果：

简单的通过几行代码就可以轻松实现，再也不用辛苦的调各种样式啦。

jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true