垂直および水平方向にCSSの円でテキストを循環する（iPhone通知バッジなど）

StackOverflow https://stackoverflow.com/questions/4801181

質問

CSS3でクロスブラウザーiPhoneのようなバッジを行う方法を探しています。私は明らかにこれに1つのdivを使用したいと思っていますが、代替ソリューションは問題ありません。重要な要素は、すべてのブラウザーに水平に、および垂直に中心にする必要があることです。

これらの通知に関する興味深い設計上の問題は、指定された幅（高さが固定されている）を持たないことです。 、しかし、代わりにカプセルのように見えます。

編集: ：追加の制約（スティーブンから）：

  • JavaScriptはありません
  • テーブルセルへのディスプレイプロパティのマングルはありません。これは疑わしいサポートステータスです
役に立ちましたか？

解決

水平センターリングは簡単です： text-align: center;. 。要素内のテキストの垂直センタリングは、設定することで実行できます line-height コンテナの高さに等しくなりますが、これはブラウザ間に微妙な違いがあります。通知バッジのような小さな要素では、これらはより顕著です。

セットする方が良いです line-height に等しい font-size （またはわずかに小さく）パディングを使用します。あなたはあなたの身長を調整して宿泊する必要があります。

これがCSSのみのシングルです <div> かなりiPhoneのように見えるソリューション。それらはコンテンツで拡張します。

デモ： http://jsfiddle.net/thinkingstiff/mlw47/

出力：

enter image description here

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>

他のヒント

高さが不明なコンテンツがあるが、コンテナの高さがわかっている場合。次のソリューションは非常にうまく機能します。

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

例http://jsfiddle.net/thenewconfection/eytvn/

Newbyが表示するための1つのGotcha：inline-block; [SPAN]と[P]にはHTML空白がないため、スパンがスペースを占有しないようにします。また、IEのインラインブロックを表示するためのCSSハックに追加しました。これが誰かを助けることを願っています！

興味深い質問！水平および垂直方向にDivを中心に囲まれたガイドがたくさんありますが、中心divが未処理の幅である被験者の権威ある扱いは顕著にありません。

いくつかの基本的な制約を適用しましょう。

  • JavaScriptはありません
  • ディスプレイプロパティのマングルはありません table-cell, 、これは疑わしいサポートステータスです

これを考えると、争いへの私の参入は inline-block プロパティを表示して、従来の親コンテナ内で垂直に中心にある、完全に配置された事前に配置された事前に配置されたDiv内のスパンを水平に中心に表示します top: 50%; margin-top: -123px ファッション。

マークアップ： 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; }

ソース： http://jsfiddle.net/38efb/

無関係なマークアップを必要としないが、解決するよりも多くの問題が発生する可能性が非常に高い代替ソリューションは、ラインハイトプロパティを使用することです。これをしないでください。しかし、ここにはアカデミックメモとして含まれています。 http://jsfiddle.net/gucww/

Zurb Foundation CSSフレームワークでうまく機能するフラットバッジの例は次のとおりです
注：さまざまなフォントの高さを調整する必要がある場合があります。

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

マジックソース！

.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;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top