Question

我是Ionic的新人。我尝试设置带有图标和文本的导航栏。使用此代码，我有两个：

HashMap

我的问题是图标太高了。如何仅更改图标的位置或仅更改文本的位置？因为我只找到了如何移动它们，但不仅仅是其中的一个。

我是Ionic的新人，所以如果有一个简单的解决方案，请告诉我！：d

Answer 1

您可以在CSS中添加vertical-align:middle;

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('onepage', {
    url: '/1',
    templateUrl: 'onepage.html'
  })
  
  $urlRouterProvider.otherwise("/1");
})

    .title-image {
      height: 30px;
      width: 30px;
      vertical-align: middle;
      margin-top: -3px;
    }
    
    .title-text {

    }

<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 Template</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>

    <ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="center">
      <ion-nav-back-button class="button-icon ion-arrow-left-c">
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view class="slide-left-right"></ion-nav-view>

    <script id="onepage.html" type="text/ng-template">
      <ion-view title="onepage">
        <ion-nav-title>
          <img class="title-image" src='./img/soloLogo.png'><span class="title-text"> Aree di competenza</span>
        </ion-nav-title>  
        <ion-content class="padding">
          <h3>Bla bla bla</h3>
          <p>Bla bla bla</p>
        </ion-content>
      </ion-view>
    </script> 

  </body>
</html>

在Ionic中更改离子视图标题上文本/图标的位置

1 个答案: