如何使用CSS对齐左图标：在垂直居中之前，将其与右边的文本进行比较

Question

我具有下面的结构，我想完成所附图像上的内容：与右边的文本相比，将绿色按钮垂直居中对齐在同一行上。当前绿色按钮在顶部有点，我正在尝试应用margin-top: 5px;，但它不起作用。

          header {
                >span {
                    .text-and-icon-granted{
                        // this line change the text on the right and icon on the left to green
                        color: green;

                        &:before {
                            // this is the button itself (without the text)
                            margin-right: 5px;
                            font-size: 10px;
                        }
                    }
                    .text-and-icon-icon-denied {
                        // this line change the text on the right and icon on the left to red
                        color: red;

                        &:before {
                            // this is the button itself (without the text)
                            margin-right: 5px;
                            font-size: 10px;
                        }
                    }

                }
            }

什么是最好的方法？

Answer 1

margin-right: 5px;
vertical-align:middle;
font-size: 10px;