CSS的圓的內部編號，位置是關閉的iOS

我想要的風格號界內，但因爲它在iOS上看起來不一樣在Chrome中。在iOSCSS的圓的內部編號，位置是關閉的iOS

在Chrome

enter image description here

預覽

enter image description here

通知的號碼不垂直居中在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 of this example。我怎樣才能讓這看起來像iOS一樣？

我也嘗試了各種哪些是原產於iOS的其他字體，但仍問題仍然存在。

來源

2013-05-29 yekta

他們有點（Win7，最新的Chrome）：http://d.pr/i/Vebv – swiss196

center對於vertical-align屬性不是有效值。同樣，這個問題似乎並不是iOS特有的，因爲我也在Windows 7上的Chrome上遇到這個問題，您的網站可能會被緩存。

解決此問題的一種方法（您的字體看起來太大而無法放入小容器中）是將跨度的高度簡單地增加到12px：JSFiddle demo。

另一種方法是將height:12px替換爲line-height:10px。 JSFiddle demo。

這兩種方法都將增加你的跨越的高度，我不知道這是你的情況的不良影響。

來源

2013-05-29 14:08:27

使用以下技巧：'font：10px/11px Arial，Helvetica，sans-serif;'類似，但似乎看起來有點打賭之三。謝謝您的幫助！ – yekta

嘗試設置line-height: 1em。

來源

2013-05-29 14:07:40 freejosh

垂直居中是一直是一個巨大的痛苦。我喜歡使用表格單元格，它們似乎是一個公平的跨瀏覽器解決方案。然後我再次只是一個小菜。

我會做的是：

/* 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>

這實際上可以垂直對齊你的號碼，如果確實是你的問題......

來源

2013-05-29 14:35:23

但事實並非如此。 –

CSS的圓的內部編號，位置是關閉的iOS

回答

相關問題