在Web应用程序或者Web页面中,引用Icon图标,常见的方式主要有两种方式:
1.inline-flex 和 align-items 采用的是CSS Flexbox的模式 2.inline-block 和 vertical-align采用的是较为传统的垂直对齐模式
方式一:
<html>
<style type="text/css">
.demo{
display: inline-flex;
align-items: center;
font-size: 40px;
}
.demo span{
border: 1px solid #333333;
border-radius: 38px;
padding: 3px 10px;
font-size: 10px;
display: inline-block;
}
</style>
<body>
<div class="demo">
文本<span>4天后</span>
</div>
</body>
</html>
方式二:
<html>
<style type="text/css">
.demo{
display: inline-flex;
align-items: center;
font-size: 40px;
}
.demo span{
display: inline-block;
vertical-align: middle;
}
.demo .btn{
border: 1px solid #333333;
border-radius: 38px;
padding: 3px 10px;
font-size: 10px;
}
</style>
<body>
<div class="demo">
<span>文本</span><span class="btn">4天后</span>
</div>
</body>
</html>