jquery - 独 Angular 兽用户界面 : Buttons text moves (possibly overlapping styles? )

Question

首先在此处附加 js fiddle 链接 js fiddle link here

我在尝试使用 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