Question

我尝试在按钮内实现spinner但由于某种原因，微调器似乎是顶部对齐而不是垂直居中：

我的代码如下：

<button type="submit" class="button button-block button-positive">
<ion-spinner class="spinner-energized"></ion-spinner> Click me!
</button>

Codepen：http://codepen.io/anon/pen/BjOqvK?editors=1010

知道为什么吗？

Answer 1

Ionic团队提供了以下解决方案：

.spinner svg {
  width: 16px !important;
  height: 16px !important;
}

New codepen

他们给了我更多的背景信息：

这不是离子旋转器的预期用途，所以自定义css是需要。你需要调整宽度/高度。

Answer 2

你也可以使用flexbox解决这个问题：

<button class="button button-light">
    <div class="center-vertical-horizontal">
      Button text
      <ion-spinner class="button-spinner"></ion-spinner>
    </div>
</button>

以下css：

.center-vertical-horizontal {
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-spinner {
  display: flex;
}

Codepen：http://codepen.io/anon/pen/LRVgGK

Answer 3

我也遇到了这个问题。我这样解决了。

 <html ng-app="ionicApp">
  <head>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>
  <style>
       .spinner svg {
   padding-top: 2px;
  width: 38px;
 height: 38px;
 stroke: #fff;
  fill: #999;
 }
.button-text {
 vertical-align:text-bottom;
}
 </style>
  <body ng-controller="MainCtrl">
   <ion-nav-view></ion-nav-view>

<script id="templates/event-menu.html" type="text/ng-template">
  <ion-side-menus enable-menu-with-back-views="false">

    <ion-side-menu-content>
      <ion-nav-bar class="bar-positive">
        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
          </button>
        </ion-nav-buttons>
      </ion-nav-bar>

      <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content> 


</script>

<script id="templates/home.html" type="text/ng-template">
  <ion-view view-title="Welcome">
    <ion-content class="padding">

      <button type="submit" class="button button-block button-positive">   <ion-spinner class="spinner-energized"></ion-spinner><span class="button-text">Click me!</span></button>
    </ion-content>
  </ion-view>
 </script>

按钮垂直对齐内的离子旋转器

3 个答案: