2016-02-08 1 views
0

Я новичок в Ionic. Я пытаюсь настроить панель навигации со значком и текстом. С этим кодом у меня есть:изменить положение текста/значка на название иона в Ionic

<style> 
    .title-image { 
     height : 30px; 
     width : 30px; 
    } 
</style> 

<ion-view> 
    <ion-nav-title> 
     <img class = "title-image" src='./img/soloLogo.png'><span> Aree di competenza</span> 
    </ion-nav-title> 
</ion-view> 

Моя проблема в том, что значок слишком вверх. Как изменить положение только значка или только текста? Потому что я только нашел, как перемещать оба, но не только 1 из них.

Я новичок в Ionic, поэтому, если есть простое решение, скажите это мне! : D

+0

Это является CSS вопрос на: вы пытались применить CSS класс как к элементу IMG и поверочного элемент? – beaver

ответ

0

Вы можете добавить в свой 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>