Objekt in Zelle zentrieren

[maddhin]

Hallo,

ich bin leider totaller HTML Anfänger und versuche mir mit Tablet UI ein schönes Frontend zusammenzubauen. Eigentlich einfach, aber leider scheitere ich an einem vermeidlich kleinen Problem: Zentrieren!

In dem Code unten habe ich ein Widget (city-aqi-container) eingefügt (Basis ist der Example code, der mit der Installation kommt), was zu meiner Überraschung sogar funktioniert hat! Leider "klebt" das Widget nun an der linken Seite. Wie kann ich das in der Zelle (horizontal) zentrieren, so wie bei all den anderen Buttons, etc auch (irgendwie geht das da automatisch)?

Code Auswählen Erweitern

<header>AIR QUALITY</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell" data-width="450px">
                                <span  id="city-aqi-container"></span>
                                <script  type="text/javascript"  charset="utf-8">
                                _aqiFeed({
                                display:"<div style='%style;max-width:80px;text-align:center;'><small>%cityname AQI:</small> <div style='font-size:30px;height:40px;padding-top:1px;'>%aqiv</div> %impact</div>",
                                container:"city-aqi-container",
                                city:"city"  });
                                </script>
                        </div>

                        <div class="cell" data-type="popup" data-width="450px">
                            <div data-type="label" data-device="out.pms2" data-get="PM25-hour.av" data-limits='[-73,19,23]' data-fix="0" data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="ug/m3" class="bigger thin"></div>
                            <div>PM 2.5 (60min)</div>
                             <div class="dialog">
                                <header>PM 2.5 (60min average)</header>
                                <div data-type="simplechart" data-device="out.pms2" data-logdevice="FileLog_out.pms2" data-columnspec="4:PM25-hour.av" data-minvalue="0" data-maxvalue="200" data-yticks="10" data-height="250" data-daysago$
                                </div>
                            </div>

                        </div>



Lieben Dank!

[setstate]

Was klebt an der linkes Seite? <div class="cell" data-width="450px"> oder <div class="cell" data-type="popup"

füge mal "bg-green" hinzu und zeige uns einen Screenshot. Dann sieht man, welches Element nicht zentriert ist.

Code Auswählen Erweitern

class="cell bg-green"

[maddhin]

Hallo,

<div class="cell" data-width="450px"> - das (gesamte) gelbe Feld soll im grünen horizontal (und ggf vertikal) zentriert werden - siehe Bild anbei.

PS: im gelben Feld an sich gibt es keine Probleme, das ist zentriert, sieht nur durch die Redaktion nur etwas komisch aus.

DANKE!

[setstate]

Kapsel den Inhalt nochmal in ein div

Code Auswählen Erweitern


<div class="cell" data-width="450px">
  <div>

    <span>
...
  </div>
</div>




[maddhin]

Hallo,

ein <div> hatte keinen Effekt, ein  <div class="cell"> verschiebt "etwas", siehe anbei. Scheint aber nicht wirklich zentriert zu sein, aber immerhin eine Verbesserung!

[setstate]

sieht doch gut aus!?

[maddhin]

Sorry für die späte Resonanz, ich konnte in der letzten Zeit hier leider nicht weiterarbeiten.

Anbei nochmal ein Bild mit der aktuellen Situation.

Das <div class="cell"> hatte ja schon einen positiven Effekt, aber wirklich zentriert ist es noch nicht (Zelle ist orange gefärbt). Gibt es noch Ideen?

Mit der aktuellen Situation könnte ich leben, aber mir geht es auch ein bißchen darum, das Ganze zu verstehen damit ich das in Zukunft dann selber machen kann:)

Lieben Dank!