Zentrierung (h/v) von input type="radio" in label, was td zu 100% ausfüllt

  • CSS

Es gibt 3 Antworten in diesem Thema. Der letzte Beitrag () ist von Marcus Gräfe.

    Zentrierung (h/v) von input type="radio" in label, was td zu 100% ausfüllt

    Ich habe eine Tabelle in HTML. In den einzelnen td möchte ich ein label haben, welches dieses td zu 100% ausfüllt (horizontal wie vertikal). In diesem Label wiederum ist ein Radiobutton, welcher zentriert sein soll (wieder horizontal und vertikal).

    Ich bin nun schon bestimmt 2 Stunden an diesem Problem dran. Ich schaffe es entweder, dass der Radiobutton richtig zentriert ist oder dass das Label das td zu 100% ausfüllt, aber nicht beides.

    Mein bisheriger Ansatz:

    HTML-Quellcode

    1. <table>
    2. <tr>
    3. <td class="padding">Testzeile</td><td><label for="a"><input type="radio" id="a"></label></td><td><label for="b"><input type="radio" id="b"></label></td>
    4. </tr>
    5. </table>

    CSS-Quellcode

    1. .padding { padding: 1em; }
    2. td { background-color: grey; }
    3. label {
    4. display: inline-block;
    5. width: 100%;
    6. height: 100%;
    7. }

    JSFiddle: jsfiddle.net/dzf63gnj/

    Hat jemand eine Idee? Der Grund, warum das Label das td zu 100% ausfüllen soll ist der, dass ich in die große Zelle klicken möchte, um den Radiobutton zu drücken, und nicht exakt eben diesen kleinen Button treffen muss. Das Zentrieren ist natürlich für die Optik.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    @Marcus Gräfe

    sollte so passen: jsfiddle.net/n2g31urb/

    Mit flex oder grid kann man womöglich eine "hübschere" Lösung bauen, aber deswegen bin ich auch kein Designer sondern PHP Entwickler^^

    Link :thumbup:
    Hello World

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Link“ ()

    Es sieht optisch gut aus, aber es funktioniert nicht, wenn die erste Spalte mehrzeilig wird (z. B. im Mobilmodus). Das Label füllt dann das td vertikal nicht zu 100% aus.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    Ich habe es nun endlich hinbekommen!

    Das HTML hat sich nicht geändert, das CSS sieht nun so aus:

    CSS-Quellcode

    1. .padding { padding: 1em; }
    2. td {
    3. background-color: grey;
    4. height: 100%;
    5. }
    6. label {
    7. display: flex;
    8. min-height: 100%;
    9. justify-content: center;
    10. }
    11. tr {
    12. height: 1px;
    13. }

    jsfiddle.net/b1zhajuw/
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum