html布局之图标文字混排

来源：互联网发布：java微信自定义菜单编辑：程序博客网时间：2024/05/05 22:11

摘要：做html布局的时候经常用到图标和文字的混排，使用的时候经常要调很长时间，今天来总结一下。

直接上代码：

<!doctype html><html class="no-js"><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">    <title>小徽章</title>    <link rel="stylesheet" href="../assets/css/amazeui.css">    <style>        #p {            background-color: blue;            width: 80%;            margin: 0 auto;            text-align: center;            padding: 0.2em 0 0.5em 0;            border-radius: 0.5em;        }        #p>img {            display: inline-block;            height: 1.2em;        }        #p>span {            line-height: 1;            color: #fff;        }    </style></head><body><p id="p">    <img src="static/img/lock.png" alt="no">    <span class="am-text-bottom">点击分享到朋友圈开始预约</span></p><script type="text/javascript" src="../assets/js/jquery.min.js"></script><script type="text/javascript" src="../assets/js/amazeui.js"></script></body></html>

效果如下：

说明：

给文字添加 am-text-bottom 类，使图片底部和文字底部对其（注意这里是和文字行高的底部）；
根据第一条，所以要设置文字的行高为1，即文字行高的一倍，这样图片就和文字底部是对齐的；
设置图片的高度到合适位置；
设置容器的内padding，使上下背景色协调；
OK

<完>

0 0

html布局之 图标文字混排

html布局之图标文字混排