Vertikal zentriert in Zellen mit Problemen

Dracolein · 08 Februar 2020, 09:41:10

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.

Code Auswählen

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:

Code Auswählen


<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>

MKeY · 15 Februar 2020, 22:47:40

Code Auswählen

<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

FHEM Forum

Vertikal zentriert in Zellen mit Problemen

Dracolein

MKeY