Html Inhalt in einer Box Mittig ausrichten ?

  • Affected Version
    WoltLab Suite 5.2

    Hallo,

    Ich habe eine HTML Box erstellt mit folgendem Code

    <a href="ts3server://46.20.46.66?

    port=10246&nickname=Vault79Gast&password=Vault72&channel=Allgemeines="_blank"><img

    src="https://www.vault79.de/images/Bannerrechts.jpg" width="286" height="200" alt="vault79.de" /></a>


    Dann habe ich noch den Hintergrund der Box per CSS ausgeblendet

    .boxesSidebarRight .box:not(.boxBorderless)[data-box-identifier="com.woltlab.wcf.genericBox129"] {

    background: transparent;

    }

    Aber ich muss was vergessen haben den wie auf dem Bild zu sehen ist, sitzt der Inhalt der Box nicht mittig unter der anderen Box sondern ist Rechtsbündig.

    wie bekomme ich die den Inhalt der Box jetzt Zentriert, so das er Mittig unter der anderen Box ist.:/

    Grüße Dirk

  • Go to Best Answer
  • Felix | D1strict

    Meinst du so ?

    .boxesSidebarRight .box:not(.boxBorderless)[data-box-identifier="com.woltlab.wcf.genericBox129"] {

    background: transparent;

    margin-left: auto;

    margin-right: auto;

    }

    Wenn ich es so mache ändert sich nichts bleibt Rechtsbündig.

  • Moin Dirk ,

    Versuche es doch einfach mal So

    Code
    <center><a href="ts3server://46.20.46.66?
    port=10246&nickname=Vault79Gast&password=Vault72&channel=Allgemeines="_blank"><img
    src="https://www.vault79.de/images/Bannerrechts.jpg" width="286" height="200" alt="vault79.de" /></a></center>

    So hat das bei mir schon mal Funktioniert

    Mit Besten Grüßen, ArnoEdwin Begnadigt.           I write as I learned it, and because I can't do better, allow me ;)

  • So vielleicht ;)

    CSS
    .boxesSidebarRight .box:not(.boxBorderless)[data-box-identifier="com.woltlab.wcf.genericBox129"] img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        background: transparent;
    }
    
    .boxesSidebarRight .box[data-box-identifier="com.woltlab.wcf.genericBox129"] .boxContent {
        padding: 0px !important;
    }

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!