Unicorn-UI：按钮文字移动（可能重叠样式？）

Question

首先在js fiddle link here

附加js小提琴链接

我在尝试使用Unicorn UI Button library创建按钮以打开模态窗口时遇到了一些困难。

我遇到的问题是文本的对齐方式 我的代码是

<button class="button button-raised button-action button-circle button-extreme">Wireframe and Mockups</button>  

文本正确对齐，如此处所示
但是，当我通过给它一个标签更改代码，以便我可以让我的模态窗口代码工作，如

<label for="window-1" button class="button button-raised button-action button-circle button-extreme">Wireframe and Mockups</button></label>

如图所示，文字未对齐。

我尝试更改按钮库中的css样式以及更改模态窗口的css，但是当我应用"label for = "windows 1"时，我无法使文本对齐保持不变。请帮我解决我的错误。

Answer 1

在css样式的末尾添加my-label类，并将其添加到标签元素类中，如下所示：

.my-label{
   display:table-cell;
   vertical-align:middle;
}

<label for="window-1" button class="... my-label">Wireframe and Mockups</label>

如果您不想添加新课程，您还可以将这些css规则添加到.button-raised.button-action css选择器中，如下所示：

.button-raised.button-action {
    ...
    display: table-cell;
    vertical-align: middle;
}

我还更新了您的Fiddle