서클 안의 숫자에 대한 CSS, iOS에 대한 위치 꺼짐

Question

서클의 내부 스타일을 지정하려고하지만 Chrome에서 iOS와 동일한 모양을 갖지 않습니다.

공지 사항 아이폰 OS

에서 미리보기

크롬

에

미리보기는 번호는 수직으로 아이폰 OS을 중심으로하지 않습니다.

예, 추가하려고 시도했습니다. vertical-align: center; 트릭을 수행하지 않습니다.

다음은 HTML 여기

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

JS Fiddle of this example입니다 내 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; 
} 

입니다. iOS에서 어떻게 보이게 할 수 있습니까?

나는 또한 iOS 고유의 다양한 글꼴을 시도했지만 여전히 문제는 계속됩니다.

Answer 1

center은 vertical-align 속성에 유효한 값이 아닙니다. 마찬가지로 Windows 7의 Chrome에서도이 문제가 발생하므로이 문제는 iOS에만 해당되지 않는 것으로 보입니다. 사이트가 캐시에 저장되어있을 수 있습니다.

문제를 해결할 수있는 한 가지 방법은 글꼴이 작은 컨테이너에 들어가기에는 너무 커서 스팬의 높이를 12 픽셀 (JSFiddle demo)으로 높이는 것입니다.

또 다른 방법은 height:12px을 line-height:10px으로 대체하는 것입니다. JSFiddle demo.

두 가지 방법 모두 스팬의 높이를 늘리며, 이것이 귀하의 경우에 바람직하지 않은 영향인지 여부는 확실하지 않습니다.

Answer 2

line-height: 1em으로 설정해보십시오.

Answer 3

세로 센터링은 항상 커다란 고통이었습니다. 나는 테이블 셀을 사용하기를 좋아하는데, 문제에 대한 공정한 브라우저 간 솔루션 인 것처럼 보입니다. 그렇다면 다시 나는 나 자신의 멍청한 놈이다.

내가 뭘 할 것은 :

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

이 그 참 문제입니다 경우 acutally 수직으로 그들은 조금있어 ...