Question

我现在只是在图标上使用float: left，因为我正在努力将文本放在我的按钮中，使图标位于“中间”（左边的20％）并且文本位于中间（右边的80％）。

像这样：

**********************************
*   Icon     Text will be here   *
*                                *
**********************************

以下是设置按钮的方法：

<button class="button button-block">
    <i class="ion-plus-round"></i><span>Add to Favorites</span>
</button>

Answer 1

尝试使用CSS flexbox：

#container {
  display: flex;
  align-items: center;
}
#container > * {
  margin-right: 5px;
}

<button>
  <span id="container">
      <img src="http://i.imgur.com/60PVLis.png" width="25" height="25" alt="">
      <span>Add to Favorites</span>
  </span>
</button>

我使用span来封装内容，因为some browsers don't accept button elements as flex containers。

浏览器支持

所有主流浏览器except IE 8 & 9都支持Flexbox。一些最新的浏览器版本，例如Safari 8和IE 10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。 this answer中的更多详细信息。

Answer 2

以下是使用Font Awesome的示例。

向rm {2,3}/1.js添加左边距以控制两个内联元素（span和i）之间的间距。

如果为按钮指定宽度，则可以根据需要将宽度设置为两个子元素。

span

button span {
  margin-left: 10px;
}

Answer 3

这样的事情怎么样？

＆＃13;

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {

});

＆＃13;

.button-block {
  display: inline-block;
  vertical-align: middle;
}

.button-block i {
  margin-right: 15px;
}

＆＃13;

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Ionic Pull to Refresh</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

</head>

<body ng-controller="MyCtrl">


  <ion-content>
    
    <div class="tabs" style="height:auto;">
      <div class="row">
        <div class="col" style="padding: 0">
          <button class="button button-block button-positive">
            <i class="ion-plus-round"></i><span>Add to Favorites</span>
          </button>
        </div>
      </div>
    </div>
  </ion-content>

</body>

</html>

＆＃13;

如何在按钮内定位文本？

3 个答案: