2 Grafiken und deren Werte in einem Block anzeigen

[Damrak2022]

Guten Morgen zusammen,
ich habe momentan den Sonnenaufgang und Sonnenuntergang in zwei Nodes (Node-Red) so dargestellt (Bild 1)
Das Html vom Sonnenaufgang sieht so aus:

<i class="fa fa-arrow-up" aria-hidden="true"></i>

Das vom Sonnenuntergang so:

<i class="fa fa-arrow-down" aria-hidden="true"></i>

Gerne würde ich es aber so darstellen (Bild 2).

Ich habe schon einiges versucht, aber leider ohne Erfolg.
Könntet Ihr mir helfen wie der korrekte Html Code aussehen müsste.

Sorry, aber bisher hatte ich mit Html nichts bis sehr wenig zu tun.

Gruß Andy

 

[Sempervivum]

Guten Morgen Andy,
Eigentlich ist es kein Problem, mit CSS die Elemente nebeneinander oder untereinander anzuordnen und die Farben zu ändern, aber Du schreibst in deinem anderen Thread, dass Du ein Tool namens Red Node verwendest. Kannst Du denn damit das HTML und CSS beliebig gestalten? Um deine Frage zu beantworten, müsste man nämlich das Darum-Herum sehen, wie diese i-Elemente in einem Container eingebaut sind.
Beste Grüße - Ulrich

 

[Damrak2022]

Hallo Ulrich,
dann ganze Board sieht so aus - Bild 3
Generell möchte ich das das komplette Board als ein Board ohne diese Zwischenräume dargestellt wird (siehe 2. Post von mir) und der Teil mit dem Pfeil nach oben und der Uhrzeit, sowie mit dem Pfeil nach unten und der Zeit in einer Reihe dargestellt wird.
Den Html Code, zumindest für die Zeile mit den Pfeilen kann man in der Text Node eingeben - Bild 4
Damit Du Dir das besser vorstellen kannst, habe ich die Dir mal ein Bild von meinem Flow in Node Red angehängt - Bild 5

 

[Sempervivum]

Was man in deinem Bild 4 sieht, steuert ganz offensichtlich wie die Elemente innerhalb eines Nodes angeordnet werden. Du willst jedoch die Anordnung der Nodes selbst steuern. Prüfe, ob dir dies dabei weiter hilft:
https://nodered.org/docs/user-guide/editor/workspace/arrange

 

[Damrak2022]

Danke, ich schaue mir das gleich an.
Nun habe ich noch eine letzte Frage.: Nachdem ich dem Feld hier ein Logo hinzugefügt habe, ist derText nach unten gerutscht. Wie müsste ich den Html Code ergänzen, damit ich den Text wieder in der Mitte des Feldes zentriert angezeigt bekomme?

 

[Sempervivum]

Poste doch mal das HTML einschl. des Drumherum, nicht aus dem Editor sondern aus der Quelltextansicht des Browsers.