2016-09-21 3 views
1

Ich habe ein Problem, Text in der Mitte in der Kopfzeile wegen des Pfeils für die Rückseite auszurichten. Mein Code ist wie folgt:Fehlausrichtung Text in der Mitte ausrichten

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

enter image description here

Aber der Text "Domótica" ist nicht in der Mitte. Jemand weiß, wer es lösen kann? Vielen Dank im Voraus.

Mit freundlichen Grüßen.

+0

Warum verwenden Sie die '

' Tags? Wird der 'ion-title' nicht standardmäßig zentriert? – Ivaro18

+0

Und ich sehe Ihre Frage zum Ändern der Farbe der Kopfzeile nicht funktioniert? ;) – Ivaro18

+0

Hahahaha du hast Recht Ivaro18! Noch weiß ich nicht, wie man die Farbe der fuc *** ing Linie ändert: D Ich habe mit "ion-title" geschmeckt, aber funktioniert nicht ... In Google Chrome funktioniert gut, aber in meinem Smartphone Android nicht Arbeit so ... das ist der Grund für versuchen mit

und das gleiche Problem: S Ich bin neu mit Ionic arbeiten und eine Menge Probleme. – Tecnico

Antwort

1

Ich denke, Sie sollten Sass verwenden, um Kunden css anzuwenden. Sie müssen Beispielcode in Ihrem test.scss in derselben Stelle mit HTML-Seite

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

}

Beifall finden!

+0

Weitere Erklärung über diese besondere scss-Datei: https://forum.ionicframework.com/t/ionic-2-navbar-ion-title-align-center-for-android/52263 – Ivaro18

+0

Danke für die Antwort mich, aber Entschuldigung, habe ich nicht sehr gut verstanden. Ich habe einen Ordner mit meinen 3 Dateien, (beispiel.html, beispiel.scss, beispiel.ts) also ... Du sagst, dass inclusive deines code in meiner example.scss sollte es gut funktionieren? Vielen Dank im Voraus! – Tecnico

+0

Ich habe diese Lösung für mein Problem angewendet. Ich bin sicher, es funktioniert gut! =)) – johnny

2

Ich weiß, es ist spät für diese Antwort, aber ich fand eine Lösung, um die Zurück-Taste mit zentrierten Titel arbeiten zu erhalten.

Sie können dieses Stück Code zu Ihrer App hinzufügen und es ist behoben.

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

Es besteht im Wesentlichen die Z-Position der Taste nach oben bewegen, da durch die Position mit: absolute für den Titel es den ganzen Raum alle Elemente überschrieben nimmt.

+0

das hat bei mir funktioniert, danke. Wenn Sie die obige Lösung zum Zentrieren verwenden, wird dadurch der Zurück-Knopf wieder funktionieren. Durch verschiedene Tests scheint es, dass das Setzen von Padding-rechts auf dem Logo, um es zu zentrieren, den Back-Button funktionierte. etwa 44px (unter Berücksichtigung der Backbutton-Breite) hat gut funktioniert. Aber ich gehe vorerst mit der Gewissheit, dass es genau zentriert ist. – drlff

+0

Ich bin froh, dass es für dich funktioniert hat. Ich verwende diesen Hack derzeit ohne Probleme. Ich suche nach einer anderen Lösung. Leider kann ich dazu keine Pull-Anfrage machen, da Android standardmäßig nicht zentriert ausgerichtet ist. –

Verwandte Themen