Zentrieren Sie Punkte vertikal mit CSS

Lesezeit: 2 Minuten

Benutzeravatar von Lucas
Lukas

Wie kann ich nur mit CSS Punkte zwischen Links machen, die vertikal zentriert sind? Es ist möglich, aber ich kann nicht herausfinden, wie es geht.

Erwartet:

Facebook-Inline-Liste: „Gefällt mir“, „Kommentar“, „Teilen“, „1413“, „70“, „76“, vor ungefähr einer Minute

HTML

<label><a href="#">Like</a></label>
<label><a href="#">Comment</a></label>
<label><a href="#">Share</a></label>
<label><span>1 hour ago</span></label>​

CSS

a{ 
    vertical-align: middle;
}

label:not(:last-child):after{
    content: " . ";
}

Nicht funktionierendes Beispiel: http://jsfiddle.net/4ZFMm/

Vielen Dank!

sachleens Benutzeravatar
Sachleen

Verwenden &middot; · für einen Punkt bzw &bull; für einen dickeren Punkt im Stil einer Aufzählung.

Für den Einsatz in der content Attribut, müssen Sie es maskieren:

Mittelpunkt:

content: " \B7 ";

Stier:

content: " \2219 ";

Referenzen:

  • schöne antwort, danke. aber ich bekomme den Middot immer noch nicht genau in die Mitte jsfiddle.net/4ZFMm/1

    – Lukas

    25. Oktober 2012 um 3:28 Uhr

  • Es ist in der Mitte, in der Mitte der Linie. Sie wollen es etwas unter der Mitte. Padding/margin/lineheight funktionieren hier nicht… Klicken Sie mit der rechten Maustaste darauf auf Facebook und gehen Sie zu Inspect Element (Chrome), es gibt Ihnen den Stil für das Element, damit Sie sehen können, wie sie es tun. Ich vermute, Sie könnten es auch mit einem BG-Bild machen.

    – sachleen

    25. Oktober 2012 um 3:32 Uhr

  • Eigentlich ist es bei näherer Betrachtung für mich auf dem gleichen Niveau wie Ihr Screenshot. (Chrom, Win7)

    – sachleen

    25. Oktober 2012 um 3:33 Uhr

  • @Luccas, du Geige verdrängt es. Entfernen Sie einfach die vertical-align Einstellungen, und der mittlere Punkt erscheint an der richtigen Stelle, vertikal in der Mitte der x-Höhe.

    – Jukka K. Korpela

    25. Oktober 2012 um 5:50 Uhr

  • Wie macht man die Kugel größer?

    – Geckob

    18. Januar 2016 um 8:52 Uhr

Irgendwie wurden diese auf dem Live-Server vermasselt, obwohl sie lokal funktionierten, hier ist, was bei mir funktioniert hat, vielleicht hilft es jemand anderem:

.element:before {
    content: "\2022";
}

1430050cookie-checkZentrieren Sie Punkte vertikal mit CSS

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy