Guten Tag zusammen,
wie ist es machbar, dass Inhalte einer Zelle vertikal (!) zentriert werden?
Die horizontale Zentrierung ist kinderleicht, aber vertikal bin ich am verzweifeln.
Ich habe schon etliche CSS Codes durchprobiert wie z.B.
style="display:table-cell; vertical-align:middle"
innerhalb des Zellen-Divs, sowie innerhalb des Text-Divs. Nie wird der Inhalt vertikal in der Zelle zentriert.
Im Anhang ein Screenshot, der das Problem anschaulich zeigt. Die Inhalte der farbig eingerahmten Zellen sollen vertikal zentriert sein
Anbei der Codeschnipsel dieser kleinen Tabelle:
<div class="sheet">
<div class="row">
<div class="col" style="width:50px">
<div class="small darker top-space">Regen:</div>
</div>
<div class="col">
<div data-type="label" data-device="WetterProplanta" data-get="fc0_chOfRainDay" data-unit="%" class="lightgray bigger"></div>
</div>
</div>
<div class="row">
<div class="col" style="width:50px">
<div class="small darker top-space">Feuchte:</div>
</div>
<div class="col">
<div data-type="label" data-device="Aussensensor_H" data-get="humidity" data-unit="%" data-fix="0" class="lightgray bigger" data-substitution="toString().substr(0,2)"></div>
</div>
</div>
<div class="row">
<div class="col" style="width:50px">
<div data-type="symbol" data-icon="wi wi-sunrise" class="tiny" data-color="orange"></div>
</div>
<div class="col right-align border-white">
<div data-type="label" data-device="Sonnenaufgang" data-substitution="toString().substr(0,5)" data-get="NTM" data-unit="Uhr" class="darker large"></div>
</div>
</div>
<div class="row">
<div class="col" style="width:50px">
<div data-type="symbol" data-icon="wi wi-sunset" class="tiny" data-color="orange"></div>
</div>
<div class="col right-align border-yellow">
<div data-type="label" data-device="Sonnenuntergang" data-substitution="toString().substr(0,5)" data-get="NTM" data-unit="Uhr" class="darker large"></div>
</div>
</div>
</div>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizey="2" data-sizex="4">
<header>Test</header>
<div class="sheet">
<div class="row">
<div class="cell-1-2">
Regen:
</div>
<div class="cell-1-2">
<div data-type="label" data-device="Wetter_Pro" data-get="fc0_chOfRainDay" data-unit="%" class="lightgray bigger"></div>
</div>
</div>
<div class="row">
<div class="cell-1-2">
Feuchte:
</div>
<div class="cell-1-2">
<div data-type="label" data-device="D1Mini01_Tasmota" data-get="sensor-am2301-humidity" data-unit="%" data-fix="0" class="lightgray bigger" data-substitution="toString().substr(0,2)"></div>
</div>
</div>
<div class="row">
<div class="cell-1-2">
<div data-type="symbol" data-icon="wi wi-sunrise" class="tiny" data-color="orange"></div>
</div>
<div class="cell-1-2">
<div data-type="label" data-device="Sonnenaufgang" data-substitution="toString().substr(0,5)" data-unit="Uhr" class="darker large"></div>
</div>
</div>
<div class="row">
<div class="cell-1-2">
<div data-type="symbol" data-icon="wi wi-sunset" class="tiny" data-color="orange"></div>
</div>
<div class="cell-1-2">
<div data-type="label" data-device="Sonnenuntergang" data-substitution="toString().substr(0,5)" data-unit="Uhr" class="darker large"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
das sieht bei mir zumindest vertikal ganz gut aus, hängt aber auch dann von deiner user.css ab :-)
FYI https://wiki.fhem.de/wiki/FTUI_Layout_Sheet (https://wiki.fhem.de/wiki/FTUI_Layout_Sheet)