Sprites Social Icons zentrieren

blechtrommel

Hallo Gemeinde,

ich habe mir Social Icons ala Sprites in die Sidebar gepackt - das funktioniert auch alles wunderbar, nur dass ich sie nicht zentriert bekomme :x.

Habe es mit einfachen center Befehlen und class ausprobiert - was man halt so weiß und unter Google findet. Entweder bin ich wieder zu doof oder sehe die Möglichkeiten nicht.

Vielleicht hat jemand eine Idee? :p

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SirEctor

Da ist einiges im Argen. Ich weiß gar nicht wo ich anfangen soll.

Also so sieht es bei dir aus

Code

<aside id="text-17" class="widget widget_text">
  <div class="textwidget">
    <p>
    </p>
    <center>
      <img src="/wp-content/uploads/2017/07/folgtuns.png" width="180" border="0">
      <br>
      <table-sidebar width="80%" class="icon-stack">
        <div id="socialicons">
          <a id="bg-fb_side" href="https://www.facebook.com/FamilyBiker.de/" target="_blank" rel="noopener title=Folge uns auf Facebook">
            <br>
            <span>Folge uns auf Facebook
            </span></a>
        </div>
        <div id="socialicons">
          <a id="bg-twitter_side" title="Twitter" href="https://twitter.com/_Family_Biker_" target="_blank">
            <br>
            <span>Folge uns auf Twitter
            </span></a>
        </div>
        <div id="socialicons">
          <a id="bg-google_side" title="Google+" href="https://plus.google.com/112501307904477233388" target="_blank">
            <br>
            <span>Folge uns auf Google+
            </span></a>
        </div>
        <div id="socialicons">
          <a id="bg-pinterest_side" title="Pinterest" href="https://www.pinterest.de/FamilyBiker1" target="_blank">
            <br>
            <span>Folge uns auf Pinterest
            </span></a>
        </div>
        <div id="socialicons">
          <a id="bg-komoot_side" title="Komoot" href="https://www.komoot.de/user/355557243374" target="_blank">
            <br>
            <span>Folge uns auf komoot
            </span></a>
        </div>
        <div id="socialicons">
          <a id="bg-rss_side" title="RSS" href="https://feedly.com/i/subscription/feed/http://www.FamilyBiker.de/feed/" target="_blank">
            <br>
            <span>Folge uns auf RSS
            </span></a>
        </div>
        <p>
        </p>
      </table-sidebar>
    </center>
    <p>
    </p>
    <p>&nbsp;
    </p>
  </div>
</aside>

Alles anzeigen

und so müsste es in etwa aussehen

Code

<aside id="text-17" class="widget widget_text">
  <div class="textwidget">
    <img src="/wp-content/uploads/2017/07/folgtuns.png" width="180" border="0">
    <br>
    <div id="socialicons">
      <a id="bg-fb_side" href="https://www.facebook.com/FamilyBiker.de/" target="_blank" rel="noopener title=Folge uns auf Facebook">
        <br>
        <span>Folge uns auf Facebook
        </span></a>
    </div>
    <div id="socialicons">
      <a id="bg-twitter_side" title="Twitter" href="https://twitter.com/_Family_Biker_" target="_blank">
        <br>
        <span>Folge uns auf Twitter
        </span></a>
    </div>
    <div id="socialicons">
      <a id="bg-google_side" title="Google+" href="https://plus.google.com/112501307904477233388" target="_blank">
        <br>
        <span>Folge uns auf Google+
        </span></a>
    </div>
    <div id="socialicons">
      <a id="bg-pinterest_side" title="Pinterest" href="https://www.pinterest.de/FamilyBiker1" target="_blank">
        <br>
        <span>Folge uns auf Pinterest
        </span></a>
    </div>
    <div id="socialicons">
      <a id="bg-komoot_side" title="Komoot" href="https://www.komoot.de/user/355557243374" target="_blank">
        <br>
        <span>Folge uns auf komoot
        </span></a>
    </div>
    <div id="socialicons">
      <a id="bg-rss_side" title="RSS" href="https://feedly.com/i/subscription/feed/http://www.FamilyBiker.de/feed/" target="_blank">
        <br>
        <span>Folge uns auf RSS
        </span></a>
    </div>
  </div>
</aside>

Alles anzeigen

Ich habe keine warum du leere p-Tags und ein table-Tag ohne Tabelle eingefügt hast.

Schreib dann noch das in dein Custom CSS

Code

#text-17 .textwidget {
    width: 264px;
    margin: auto;
    text-align: center;
}
#text-17 .textwidget:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
}
#socialicons {
    float: left;
}
#socialicons a {
    float: none;
}

Alles anzeigen

blechtrommel

Zitat von SirEctor

Da ist einiges im Argen. Ich weiß gar nicht wo ich anfangen soll.

So schlimm? ^^ ... Ist halt ein asbach uralt Theme (unsupported) und den Code gab mir der "Generator" vor...

Aber vielen lieben Dank! Es passt jetzt wunderbar. Wieder etwas dazu gelernt.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Sprites Social Icons zentrieren

Jetzt mitmachen!