Wie richte ich Text neben anderen zentrierten Text

Question

Ich habe zwei Teile Text. Ich brauche das erste Stück, das horizontal und vertikal zentriert ist, und das zweite, um direkt daneben zu sein. Derzeit sieht der Code wie folgt aus:

<View style={styles.runningTimeWrapper}> 
    <Text style={styles.loggedTime}>00:00</Text> 
    <Text style={[styles.loggedTime, styles.loggedSeconds]}>00</Text> 
</View> 

Wie kann ich es Stil so ist die 00.00 zentriert? Die Verwendung fester Breiten ist keine Option, da ich dies auf jeder Bildschirmgröße verwenden muss.

Hier ist, wie es sieht zur Zeit:

Styles:

loggedTime: { 
    color: Variables.PURPLE, 
    fontSize: 44, 
    alignSelf: 'center', 
    }, 
    loggedSeconds: { 
    fontSize: 22, 
    alignSelf: 'flex-end', 
    paddingBottom: 8 
    }, 

    runningTimeWrapper: { 
    flexDirection: 'row', 
    justifyContent: 'center', 
    flex: 1, 
    }, 

Die gewünschte Wirkung ist die Spalte von hh haben: mm mit der Mitte des Bildschirms ausgerichtet sind, und die Sekunden direkt neben den Minuten.

auf allen Referenzen ‚Zentrum‘, spreche ich über horizontale Mitte (x-Achse), nicht vertikal (y-Achse)

Answer 1

Sie die zweite Spanne position:absolute einstellen kann, so dass es aus dem normalen Gehalt Fluss sein und sicherstellen, dass die Stunde/Minute in dem Behälter zentriert werden.

.wrapper { 
 
    display: flex; 
 
    justify-content: center; 
 
    position: relative; 
 
    font-family: sans-serif; 
 
} 
 
.hm { 
 
    font-size: 44px; 
 
} 
 
.s { 
 
    font-size: 22px; 
 
    position: absolute; 
 
    bottom: 5px; 
 
}

<div class="wrapper"> 
 
    <span class="hm">12:34</span> 
 
    <span class="s">56</span> 
 
</div>

---

In der Tat, Sie brauchen Flexbox nicht wirklich, ist die text-align:center wahrscheinlich genug, um es zu tun.

.wrapper { 
 
    text-align: center; 
 
    position: relative; 
 
    font-family: sans-serif; 
 
} 
 
.hm { 
 
    font-size: 44px; 
 
} 
 
.s { 
 
    font-size: 22px; 
 
    position: absolute; 
 
    bottom: 5px; 
 
}

<div class="wrapper"> 
 
    <span class="hm">12:34</span> 
 
    <span class="s">56</span> 
 
</div>

Answer 2

Sie benötigen 3 innere Hülle (die alignItems/Selbst gesetzt verwendet) Ansichten: ein leeres auf der linken Seite und dann wickeln Sie die kleinen und großen Zahlen jeweils in einem eigenen Wrapper. Dann geben Sie die linken und rechten Wrapper flex: 1, um sie gleich breit zu machen.

https://rnplay.org/apps/hLBFng

Answer 3

Ich bin nicht 100% sicher, dass ich verstehe, was Sie gehen. Versuchen Sie, die loggedTime perfekt zentriert und die loggedSeconds rechts davon versetzt zu bekommen? Oder versuchst du einfach, beide in die Mitte zu bringen?

Ich glaube, ich konnte etwas durchgehen, indem ich flexDirection: 'row' einstellte und einige paddingTop zu den Sekunden hinzufügte.

Hier ist ein demo on rnplay.org

var styles = StyleSheet.create({ 
loggedTime: { 
    color: '#FF5500', 
    fontSize: 44, 
    alignSelf: 'center', 
    }, 
    loggedSeconds: { 
    fontSize: 22, 
    paddingTop: 20, 
    paddingBottom: 8 
    }, 

    runningTimeWrapper: { 
    flexDirection: 'row', 
    justifyContent: 'center', 
    flex: 1, 
    }, 
});