css实现一个按钮,icon有可能在左边也有可能在右边
<button class="g-button left">
<svg>这里是icon</svg>
<div>这里是按钮文字</div>
</button>
.g-button {
display: inline-flex;
justify-content: center;
align-items: center;
}
如果icon在左边
.g-button.left {
svg {
order: 1;
}
div {
order: 2
}
}
如果是在右边
.g-button.right {
svg {
order: 2;
}
div {
order: 1;
}
}
上面是 display: inline-flex 和order的粗略示例写法。可以自己再试试看
display: inline 会引起各个Button 不对齐,可以在button上加一个: vertical-align: middle;