Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[BertDerKleine]

Hallo,
ich möchte gerne einen weissen Text in einen schwarzen Kasten schreiben und der Text soll automatisch vertikal zentriert erscheinen (also gleichen Abstand von oben und unten).
In dem String-Widget kann ich anscheinend nur links/rechts-zentriert ausrichten lassen, oder?

[Homoran]

@bertderkleine sagte in String-Widget: Vertikal zentrierbarer Text?:

oder?

ja!

wenn der Text nicht variabel ist, kannst du mit line height arbeiten

[BertDerKleine]

@homoran
Danke für die Bestätigung und den Tip.

[OliverIO]

@bertderkleine
Alternativ könntest du durch zusätzliche css Anweisungen dem String Widget das beibringen

Oder ein html Widget nehmen
https://de.w3docs.com/snippets/css/wie-man-text-mit-css-vertikal-zentriert.html#:~:text=Die CSS-Eigenschaft vertical-align,zur gesamten Linie vertikal aus.

[Homoran]

@oliverio und das klappt?

ich bin ja wirklich nicht der Crack, aber vertcal-align in allen möglichen Varianten klappt zumindest in "normalen" Widgets nicht.
Zumindest habe ich es vor Jahren schon aufgegeben.

[OliverIO]

@homoran

immer diese challenges.
ja, über die nativen widget einstellungen geht es nicht, aber über eine zusätzliche css anweisung schon.
die css-anweisung ist aber widget individuell. wenn andere widgets anders aufgebaut sind, dann muss man es anpassen
nachteil, man muss manuell die höhe in pixel angeben.
bei tablecell funktioniert heigth:100% nicht, das es genauso hoch wie das umliegende element ist, daher muss man es selbst nochmal in die css eingeben
da sich beim import die widget id ändert, muss bei der css das #w00024 gegen die eigene widgetid getuascht werden.

[{"tpl":"tplValueString","data":{"oid":"nothing_selected","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"test_html":"testtext"},"style":{"left":"377px","top":"111px","height":"","width":"150px","border-width":"1px","border-style":"solid","border-color":"red"},"widgetSet":"basic"}]

#w00024 div div {
    height: 150px;
    display: table-cell;
    vertical-align: middle;
}

über css klassen könnte man das für mehrere widgets flexibilisieren, so das man im widget selbst immer nur ein oder 2 css klassennamen zuordnen muss

.myvalign div div {
    display: table-cell;
    vertical-align: middle;
}
.myvalignheight100 div div {
    height: 100px;
}
.myvalignheight150 div div {
    height: 150px;
}

dann könnte man bei einem widget in den widgeteigenschaften
Generell CSS-Klasse:

myvalign myvalignheight100

eintragen und in einem anderen

myvalign myvalignheight150

[OliverIO]

@oliverio
hier noch eine 2.technik mit flexbox, bei der man nicht immer die höhe mit angeben muss.
allerdings verliert man bei beiden die konfigurationsmöglichkeit für die ausrichtung links und rechts, zentriert.
daher noch drei hilfsklassen zum ausrichten

.myvcenter div div {
  display: flex;
  align-items: center;
  height: 100%;
}
.myvcenterright div div {
  justify-content: right;
}
.myvcenterleft div div {
  justify-content: left;
}
.myvcentercenter div div {
  justify-content: center;
}

[Homoran]

@oliverio sagte in [gelöst] String-Widget: Vertikal zentrierbarer Text?:

über die nativen widget einstellungen geht es nicht, aber über eine zusätzliche css anweisung schon.

Danke!
dann bin ich doch nich ganz doof :joy: