web-dev-qa-db-ja.com

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

CSS3でiphoneに似たクロスブラウザバッジを作成する方法を探しています。これには明らかに1つのdivを使用したいと思いますが、別の解決策で問題ありません。重要な要因は、すべてのブラウザで水平および垂直方向の中央に配置する必要があることです。

これらの通知に関する興味深い設計上の問題は、指定された幅（高さは固定）を持たないことですascii図面で）（1）および（1000）を処理できる必要があります。ここで、（1000）は完全に丸い円ではありません、代わりにカプセルのように見えます。

---（[〜＃〜] edit [〜＃〜]：追加の制約（スティーブンから）：

  • JavaScriptなし
  • サポート状態が疑わしいtable-cellへの表示プロパティのマングリングなし
csscss3cross-browsergeometrycss-shapes
52
Matt

水平方向のセンタリングは簡単です：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>
111
ThinkingStiff

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

[〜＃〜] 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/

表示する初心者の1つの落とし穴：インラインブロック。 [span]と[p]にはhtmlの空白がないため、スパンはスペースを占有しません。また、IEのインラインブロックを表示するためのCSSハックを追加しました。これが誰かを助けることを願っています！

5
Richard Herries

興味深い質問です！ divの水平方向および垂直方向のセンタリングに関するガイドは多数ありますが、中心にあるdivの幅が不定である被写体の信頼できる処理は、目立たないように行われています。

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

  • Javascriptなし
  • サポート状態が疑わしいtable-cellへの表示プロパティのマングリングなし

これを考えると、フレイへの私のエントリは、inline-block表示プロパティを使用して、従来のtop: 50%; margin-top: -123pxの方法で親コンテナ内の垂直方向の中央に、絶対位置にある所定の高さのdiv内でスパンを水平方向に中央揃えすることです。

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

余分なマークアップを必要としないが、解決するよりも多くの問題を引き起こす可能性が高い代替ソリューションは、line-heightプロパティを使用することです。これをしないでください。ただし、学術メモとしてここに含まれています： http://jsfiddle.net/gucwW/

3
Steven

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;
}
1
James Harrington