2016-09-21 4 views
1

バックページの矢印のために、ヘッダーの中央にテキストを配置するときに問題があります。私のコードは次のようである:テキストの中央揃えがずれている

<ion-header> 
    <ion-navbar> 
    <ion-title> 
     <center> 
      Domótica 
     </center> 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

enter image description here

しかし、テキスト "Domóticaは" 中央ではありません。誰かがそれを解決できるのか知っていますか? アドバイスいただきありがとうございます。

よろしくお願いいたします。

+0

なぜ「

」タグを使用しますか? 'ion-title'はデフォルトの中心になっていませんか? – Ivaro18

+0

そしてヘッダーラインの色を変更することについてのあなたの質問が表示されませんでしたか? ;) – Ivaro18

+0

あなたは正しいIharo18です!まだ私はfuc ***の行の色を変更する方法を知らない:D 私は "イオンタイトル"と味わったが、動作しません... Google Chromeでうまく動作しますが、私のスマートフォンではAndroidはそれで...

と同じ問題を試してみてください:S私は新しいIonicと多くの問題を扱っています。 – Tecnico

答えて

1

私はあなたの顧客CSSを適用するために嫌だと思います。あなたは、htmlページ

ion-title { 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding: 0 90px 1px; 
    width: 100%; 
    height: 100%; 
    text-align: center; 

}

チアーと同じ場所にtest.scssで、サンプルコードを見つけるために持っています!

+0

この特定のscssファイルの詳細説明:https://forum.ionicframework.com/t/ionic-2-navbar-ion-title-align-center-for-android/52263 – Ivaro18

+0

返信いただきありがとうございます。申し訳ありませんが、私は非常によく理解していません。私は私の3つのファイル(example.html、example.scss、example.ts)を持つフォルダを持っています...私のexample.scssにあなたのコードを含めてそれはうまくいくはずですか? ありがとうございます! – Tecnico

+0

私は私の問題のためにその解決策を適用しました。私はそれがうまくいくと確信しています! =)) – johnny

2

私はこの回答に遅れていることを知っていますが、私は中心のタイトルを使用して戻るボタンを働かせる解決策を見つけました。

このコードをアプリケーションに追加することができます。修正されています。それはすべての要素をオーバーライド空間全体を取るタイトルの絶対:

.back-button.show-back-button { 
z-index: 9999; 
display: inline-block; 
} 

それは基本的理由位置を用いて上部にあるボタンのZ位置を移動させます。

+0

これは私のために働いた、ありがとう。センタリングのために上記のソリューションを使用している場合、これはバックボタンが再び機能するようになります。さまざまなテストを通じて、ロゴの中央にパディングを設定するようにして、バックボタンの動作を維持していたようです。約44px(バックボタンの幅を考慮)がうまく機能しました。しかし、私は今、確かにそれが確実に中心に置かれていることを保証するつもりです。 – drlff

+0

私はあなたのために働いてうれしいです。私は現在、このハックを問題なく使用しています。私は別の解決策を探しています。残念ながら私はアンドロイドがデフォルトで整列されていないので、これについてプルリクエストを行うことはできません。 –

関連する問題