Checkbox in Div vertikal zentrieren

  • Hallo Leute, :)


    Ich bin neu hier und nach stundenlangen googeln gleich meine erste Frage:
    Wie zum Henka kann ich per Css eine Checkbox in einem Div vertikal zentrieren?
    Folgender Code bewirkt weder im FireFox noch im IE etwas.

    CSS
    .resTableB0 {
        display: table-cell;
    	vertical-align: middle;
    	margin-top: 3px;
    	width: 76px;
    	height: 25px;
    	border: 1px solid #000000;
    	float: left;
    	text-align: center;
    }


    Bitte dringend um Hilfe!


    Danke im Voraus und
    mfG APH

  • Da deine checkbox eine feste Höhe hat sollte das vollkommen ausreichen:

    CSS
    .resTableB0 {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }


    (Für das Zentrieren mit display:table-cell; muss der umgegebene Container übrigens ein display:table; haben, aber die Methode empfiehlt sich sowieso nur begrenzt)

  • Das ist mal so semi-korrekt gelöst und erklärt...
    Originalcode funktioniert nicht, da float das Element nach der table-cell Definition
    wieder in einen besonderen block-Element Zustand versetzt - lookie


    Ich sehe kein Problem ein fieldset oder ähnliche wrappings als Tabelle zu verkleiden,
    es wäre die sichere Variante - die Wahl der Methode ist natürlich Zielgruppenabhängig.



    // edits: ORRR!

  • bitte erläutere doch mal die erhöhte Sicherheit, die die table-Variante haben soll..? (IE 8-Unterstützung, ok, aber sonst machen Tabellen i.d.R. mehr Probleme als sie lösen.. responsive? mit viel Aufwand.. gleiche Darstellung in allen Browsern? naaah)

  • Natürlich lebt jede Methode von optimalen Gegebenheiten wie gescheiten Resets und gründlicher Struktur, nicht wahr?
    Und Anforderungen die wir nicht kennen hinzu zu dichten tut auch nicht viel zur Sache, keiner der Lösungen ist viewportübergreifend sicher,
    besonders wenn das Layout unbekannt ist.


    Ich sagte nicht dass es falsch gelöst sei, sondern dass das eigentliche Problem einfach übergangen wurde.

  • Das ist mal so semi-korrekt gelöst und erklärt...


    Kannst du mal bitte erklären was genau du damit meinst? Wenn du dich auf das vertical-align beziehst gebe ich dir recht, das funktioniert ja nicht mal. Wenn du dich auf transform beziehst dann widerspreche ich dir hier ganz klar.


    Was heißt für dich bitte semi-korrekt? Semi im Eigentlichen bedeutet halb, warum halb? Die Lösung funktioniert nicht halb sondern ganz und das auf den meisten Geräten im Umlauf. Das Problem wurde auch nicht umgangen es wurde gelöst. Mir wäre neu das Stylesheets strenge Vorgaben machen welche Methode man wann anzuwenden hat.


    fieldset oder ähnliche wrappings als Tabelle zu verkleiden,


    Was unterscheidet hinsichtlich CSS einen div-Container von einem Fieldset und wie kommst du auf Tabellen nur weil der Threadersteller mit vertical-align gearbeitet hat?


    Schön das wir auf dein professionelles Wissen bauen können, es hilft jedoch auch nicht wenn der Knackpunkt voll an dir vorbei flattert. Wenn du ausführlich ausdiskutieren möchtest welche Methode nun zu 100,07% überall funktioniert, welche Methode die aller-super-mega-coolste ist und wie stümperhaft Transformationen sind dann bist du hier leider in der falschen Umgebung. Wir sind noch immer ein Begleitforum zum HTML-Seminar und nicht das Hilfeforum für die Abschlussarbeit zum Master of Science - Web Development.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!