獨角獸的UI：按鈕文本移動（？可能重疊樣式）

Question

附加在這裏第一次JS撥弄鏈接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