Vertikal und horizontal zentrieren Text im Kreis in CSS (wie das iPhone -Benachrichtigungsabzeichen)

Question

Ich suche nach einer Möglichkeit, ein Cross-Browser-iPhone-ähnliches Abzeichen in CSS3 zu machen. Ich möchte natürlich ein DIV dafür verwenden, aber alternative Lösungen wären in Ordnung. Der wichtige Faktor ist, dass es horizontal und vertikal in allen Browsern zentriert sein muss.

Ein interessantes Designproblem zu diesen Benachrichtigungen ist, dass sie keine bestimmte Breite haben können (Höhe ist festgelegt) - sie sollten in der Lage sein, [in ASCII -Zeichnung] (1) und (1000) zu handhaben, wobei (1000) kein perfekt abgerundeter Kreis ist , aber stattdessen eher wie eine Kapsel.

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

• Kein JavaScript
• Niemanden an die Display-Eigenschaft zu Tabellenzellen, was von fragwürdigem Unterstützungsstatus ist

Answer 1

Das horizontale Zentrieren ist einfach: text-align: center;. Die vertikale Zentrierung des Textes in ein Element kann durch Einstellen erfolgen line-height Gleich der Behälterhöhe, aber dies hat subtile Unterschiede zwischen den Browsern. Bei kleinen Elementen, wie einem Benachrichtigungsabzeichen, sind diese ausgeprägter.

Besser ist zu setzen line-height gleicht font-size (oder etwas kleiner) und verwenden Sie Polster. Sie müssen Ihre Höhe an eine Erkrankung einstellen.

Hier ist ein CSS-Nur-Single, Single <div> Lösung, die ziemlich iPhone-ähnlich aussieht. Sie erweitern sich mit Inhalten.

Demo: http://jsfiddle.net/thinkingstiff/mlw47/

Ausgabe:

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>

Answer 2

Wenn Sie zufrieden mit der Höhe unbekannt haben, aber die Höhe des Containers kennen. 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; 
 }

BEISPIELhttp://jsfiddle.net/thenewconection/eytvn/

Man gotcha für Newby's zu zeigen: Inline-Block; [Span] und [p] haben keinen HTML -Weißraum, so dass die Spannweite keinen Platz einnimmt. Außerdem habe ich den CSS-Hack für Display Inline-Block für IE hinzugefügt. Hoffe das hilft jemandem!

Answer 3

Interessante Frage! Während es in horizontaler und vertikaler Zentrum eines Divs viele Leitfäden gibt, fehlt eine maßgebliche Behandlung des Subjekts, bei dem das zentrierte Div eine unvorbereitete Breite hat.

Wenden wir einige grundlegende Einschränkungen an:

• Kein JavaScript
• Niemand des Display -Eigentums zu table-cell, was von fragwürdigem Unterstützungsstatus ist

Angesichts dessen ist mein Eintritt in den Kampf die Verwendung des inline-block Stellen Sie die Eigenschaft an, die Spannweite horizontal in einem absolut positionierten Div der vorgegebenen Höhe zu zentrieren, das vertikal im übergeordneten Container im traditionellen Container zentriert ist 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/

---

Eine alternative Lösung, die keine fremden Markups erfordert, aber höchstwahrscheinlich zu mehr Problemen führt, als sie löst, ist die Verwendung der Leitungsheizeigenschaft. Tu das nicht. Aber es ist hier als akademische Anmerkung enthalten: http://jsfiddle.net/gucww/

Answer 4

Hier ist ein Beispiel für flache Abzeichen, die mit der Zurb Foundation CSS -Framework gut spielen
Hinweis: Möglicherweise müssen Sie die Höhe für verschiedene Schriftarten einstellen.

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

Die magische 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;
}