ios - 円内の数字の CSS、iOS では位置がオフになっています

Question

円の中に数字のスタイルを設定しようとしていますが、Chrome では iOS と同じように見えません。

Chrome でプレビュー

iOS でプレビュー

iOS では数値が垂直方向の中央に配置されていないことに注意してください。

はい、追加しようとしましvertical-align: center;たが、うまくいきません。

ここに私のCSSがあります

.circle {
   display: inline-block;
   text-decoration: none;
   width: 20px;
   height: 10px;
   padding: 3px;
   background: #7DBCD8;
   border: 1px solid #599DBB;
   color: #FFF;
   text-align: center;
   vertical-align: top;
   margin: 3px 3px 0 0;
   font-size: 10px;
   font-family: Arial, Helvetica, sans-serif;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px; 
}

HTMLで

<span class="circle">5</span>
<span class="circle">15</span>
<span class="circle">125</span>

この例のJS Fiddle を次に示します。これをiOSで同じようにするにはどうすればよいですか?

iOS にネイティブな他のさまざまなフォントも試しましたが、それでも問題は解決しません。

Answer 1

垂直方向のセンタリングは、常に大きな苦痛でした。私はテーブル セルを使用するのが好きです。それらは、問題に対する公正なクロス ブラウザー ソリューションのようです。繰り返しますが、私は自分自身がただの初心者です。

私がすることは次のとおりです。

/* Not even touching this */
.circle {
  display: inline-block;
  text-decoration: none;
  width: 20px;
  height: 10px;
  padding: 3px;
  background: #7DBCD8;
  border: 1px solid #599DBB;
  color: #FFF;
  text-align: center;
  margin: 3px 3px 0 0;
  font: 10px Arial, sans-serif;
  border-radius: 999px;
}

/* to make your sub-span in to a table */
.circle > span {
  display:table;
  width:100%;
  height:100%;
}

/* to make your sub-sub-span in to a table cell */
.circle > span > span {
  display:table-cell;
  vertical-align:middle;
}

と

<span class="circle">
  <span>
    <span>
      5
    </span>
  </span>
</span>

<span class="circle">
  <span>
    <span>
      5
    </span>
  </span>
</span>

<span class="circle">
  <span>
    <span>
      5
    </span>
  </span>
</span>

それが実際にあなたの問題である場合、これは実際にあなたの数字を垂直に整列させます...

Answer 2

設定してみてくださいline-height: 1em。