Vertikal und horizontal zentriert Text im Kreis in CSS (wie iPhone Benachrichtigungsabzeichen)

Ich bin auf der Suche nach einem Weg, um ein cross-browser-iphone-like-Button in CSS3. Ich würde natürlich gerne verwenden ein div, aber alternative Lösungen wäre in Ordnung. Der wichtige Faktor ist, dass es sein muss horizontal und vertikal zentriert in allen Browsern.

Eine interessante design-Problem, über diese Meldungen ist, dass Sie nicht haben eine bestimmte Breite (die Höhe ist fest) - Sie sollten in der Lage sein zu handhaben [im ascii-Zeichnung] (1) und (1000), wo (1000) ist nicht eine perfekt Runde Kreis, sondern sieht eher aus wie eine Kapsel.

BEARBEITEN: Zusätzliche Einschränkungen (von Steven):

  • Kein JavaScript
  • Keine mangeln der display-Eigenschaft table-cell, die ist von zweifelhaftem support-status

InformationsquelleAutor der Frage Matt | 2011-01-26

  1. 98

    Horizontale Zentrierung ist einfach: text-align: center;. Vertikales zentrieren von text innerhalb eines Elements kann getan werden durch einstellen von line-height gleich der Behälterhöhe, das hat aber feine Unterschiede zwischen den Browsern. Auf kleine Elemente, wie eine Benachrichtigung Abzeichen, diese sind stärker ausgeprägt.

    Besser ist, um line-height gleich font-size (oder etwas kleiner) und nutzen Polsterung. Sie müssen passen Sie Ihre Höhe zu empfangen.

    Hier ist ein CSS-only, single <div> Lösung, sieht ziemlich iPhone-like. Sie erweitern mit Inhalt.

    Demo: http://jsfiddle.net/ThinkingStiff/mLW47/

    Ausgabe:

    Vertikal und horizontal zentriert Text im Kreis in CSS (wie iPhone Benachrichtigungsabzeichen)

    CSS:

    .badge {
    background: radial-gradient( 5px -9px, circle, white 8%, red 26px );
    background-color: red;
    border: 2px solid white;
    border-radius: 12px; /* one half of ( (border * 2) + height + padding ) */
    box-shadow: 1px 1px 1px black;
    color: white;
    font: bold 15px/13px Helvetica, Verdana, Tahoma;
    height: 16px; 
    min-width: 14px;
    padding: 4px 3px 0 3px;
    text-align: center;
}

    HTML:

    <div class="badge">1</div>
<div class="badge">2</div>
<div class="badge">3</div>
<div class="badge">44</div>
<div class="badge">55</div>
<div class="badge">666</div>
<div class="badge">777</div>
<div class="badge">8888</div>
<div class="badge">9999</div>

    InformationsquelleAutor der Antwort ThinkingStiff

  2. 5

    Wenn Sie content mit Höhe unbekannt, aber Sie wissen, die Höhe der container. Die folgende Lösung funktioniert sehr gut.

    HTML

    <div class="center-test">
    <span></span><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Nesciunt obcaecati maiores nulla praesentium amet explicabo ex iste asperiores 
    nisi porro sequi eaque rerum necessitatibus molestias architecto eum velit 
    recusandae ratione.</p>
</div>

    CSS

    .center-test { 
   width: 300px; 
   height: 300px; 
   text-align: 
   center; 
   background-color: #333; 
}
.center-test span { 
   height: 300px; 
   display: inline-block; 
   zoom: 1; 
   *display: inline; 
   vertical-align: middle; 
 }
.center-test p { 
   display: inline-block; 
   zoom: 1; 
   *display: inline; 
   vertical-align: middle; 
   color: #fff; 
 }

    BEISPIEL
    http://jsfiddle.net/thenewconfection/eYtVN/

    Einer gotcha für newby ' s zu display: inline-block; [span] und [p] haben keine html-Leerzeichen, so dass der span dann nicht nehmen jeden Raum. Auch ich habe in den CSS-hack für display inline-block für IE. Hoffe, das jemand hilft!

    InformationsquelleAutor der Antwort Richard Herries

  3. 2

    Interessante Frage! Zwar gibt es viele Führungen horizontal und vertikal zentrieren einer div, eine herrische Behandlung des Themas, wo das zentrierte div ein unpredetermined Breite ist Auffällig abwesend.

    Let ' s gelten einige grundlegende Einschränkungen:

    • Kein Javascript
    • Keine mangeln der display-Eigenschaft auf table-cell, die zweifelhaften status der Unterstützung

    Gegeben, mein Einstieg in den Kampf ist die Nutzung der inline-block Anzeige-Eigenschaft auf horizontal zentrieren die Spanne, innerhalb eines absolut positionierten div-und die vorbestimmte Höhe, vertikal zentriert innerhalb des übergeordneten Containers in der traditionellen top: 50%; margin-top: -123px Mode.

    Markup: div > div > span

    CSS:

    body > div { position: relative; height: XYZ; width: XYZ; }
div > div { 
  position: absolute;
  top: 50%;
  height: 30px;
  margin-top: -15px; 
  text-align: center;}
div > span { display: inline-block; }

    Quelle: http://jsfiddle.net/38EFb/

    Einer alternativen Lösung, die nicht erforderlich ist, überflüssige Markierungen aber sehr wahrscheinlich produziert mehr Probleme als es löst, ist die Verwendung der line-height Eigenschaft. Tun Sie das nicht. Aber es ist hier als ein akademischer Hinweis: http://jsfiddle.net/gucwW/

    InformationsquelleAutor der Antwort Steven Xu

  4. 1

    Hier ist ein Beispiel von flach-Abzeichen, die gut spielen mit zurb foundation css-framework

    Hinweis: Sie müssen möglicherweise passen Sie die Höhe für verschiedene Schriftarten.

    http://jsfiddle.net/jamesharrington/xqr5nx1o/

    Magic sauce!

    .label {
  background:#EA2626;
  display:inline-block;
  border-radius: 12px;
  color: white;
  font-weight: bold;
  height: 17px; 
  padding: 2px 3px 2px 3px;
  text-align: center;
  min-width: 16px;
}

    InformationsquelleAutor der Antwort James Harrington

  6. 0

    Sorry, um diese seine eigene Antwort, aber ich bin ein newbie und kann nicht herausfinden, wie der Kommentar an der richtigen Stelle unter die Antwort, die ich bin, zu kommentieren. Anyways: Richard Herries ' s Antwort hat einen Fehler.

    Ich glaube nicht, dass es einen außergewöhnlichen Anwendungsfall zu wollen-center ein großes "x" in ein div zu dienen, als eine enge Kiste. Aber wenn die Schriftgröße Ansätze der div Abmessungen nicht vertikal zentrieren in Safari, und sehr sichtbar, hat mehr Platz an der Spitze als an der Unterseite. 

    .center-test { width: 30px; height: 30px; text-align: center; background-color: #333; }
.center-test span { height: 30px; display: inline-block; zoom: 1; *display: inline; vertical-align: middle; }
.center-test p { display: inline-block; zoom: 1; *display: inline; vertical-align: middle; color: #fff; font-size:30px;}

<div class="center-test">
    <span></span><p>X</p>
</div>

    Demonstration: http://jsfiddle.net/5WQXF/

    InformationsquelleAutor der Antwort Raymond Uppier-Püpschrute

Schreibe einen Kommentar