Icon和文本对齐方式的探索

454 阅读1分钟

在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>