在按鈕中居中一個微調框

我想將一個微調框居中在一個按鈕中。當系統得到響應時，微調器將出現。我更改了邊距和填充，並且在檢查元素時顯示更改，但它只是將邊距和填充添加到底部，而無需將按鈕內的微調器進一步向上移動。在按鈕中居中一個微調框

這裏是我的玉：

div.form-group 
    div.col-sm-4 
     button.form-control.btn.btn-success.strong-button(type='submit' ng-model='pressed' ng-disabled="pressed") Delete 
      spinner(ng-show="submitDelete")

對於微調的CSS是

.font-awesome-spinner{ 
    width: 100%; 
    text-align: center; 
}

的微調元素創建一個看起來像（取自網頁的源文件）按鈕元件內一個div

<button (all the stuff here)> 
    <div class="font-awesome-spinner ng-isolate-scope" ng-show="submitDelete"> 
      <i class="fa fa-circle-o-notch fa-spin" 
       ::before 
      </i> 
    </div> 
</button>

來源

2015-06-23 user137717

請問您可否爲您的問題包括css和任何其他庫？ – designarti

是的，我做了這個簡單的plunkr和它的中心自動http://plnkr.co/edit/qwnyBU47UhGPVS3zdfN0，你可以更新它與你在做什麼來演示問題？ –

@KevinF既然你把微調沒有文字，我試過我的文字。果然，它工作。我添加了一個跨度到按鈕來保存按鈕文本，然後我隱藏它時，微調起來。這使紡紗中心。 – user137717

您不能像DIV一樣將塊元素居中與text-align: center;設置寬度o f你的微調div，然後添加margin: auto;到微調div。

此外，您的HTML格式不正確。在您的按鈕元素中檢查(all the stuff here)。

<!DOCTYPE html> 
<head> 
    <style type="text/css"> 
    #button_element { 
     width: 100px; 
    } 
    #button_element .font-awesome-spinner { 
     width: 50px; 
     margin: auto; 
    } 
    </stlye> 
</head> 
<body> 
    <button id="button_element"> 
    <div class="font-awesome-spinner ng-isolate-scope" ng-show="submitDelete"> 
     <i class="fa fa-circle-o-notch fa-spin"></i> 
    </div> 
    </button> 
</body> 
</html>

來源

2015-06-23 21:54:12

（這裏的所有東西）僅僅是爲了簡潔起見。翡翠生成與類等等的HTML ...所需 – user137717

在按鈕中居中一個微調框

回答

相關問題