すべてのブラウザで親との相対的なスパンと文字を

Question

ネイティブフォントの2つの日本語文字を使用してアイコンを作成しようとしています。

2つの文字を含むスパンの親であるdivコンテナの円を作成しました。

スパンの幾何学的中心をスパンの幾何学的中心に重ねる（スパンは単語の幅と高さを抱き合わせにします）。

私はFirefoxでそれを行うことができましたが、それは他のブラウザでは保持されません（少なくともChromeやOperaでは動作しません）。

htmlコード：

<header id="HEADER"> 
     <div class="logo"> 
      <span>鴨川</span> 
     </div> 
     <h1>Kamogawa Gym<span>The boxing gymnase of the champions</span></h1> 
</header> 

CSSコード：ここで

.logo { 
    background: red; 
    width: 200px; 
    height: 200px; 
    border-radius: 100px; 
    ms-writing-mode: tb-rl; 
    -webkit-writing-mode: vertical-rl; 
    -moz-writing-mode: vertical-rl; 
    -ms-writing-mode: vertical-rl; 
    writing-mode: vertical-rl; 
    -webkit-text-orientation: upright; 
    -moz-text-orientation: upright; 
    -ms-text-orientation: upright; 
    text-orientation: upright; 
} 

.logo span { 
    font-size: 75px; 
    padding-right: 181.25px; 
} 

header h1 { 
    font-size: 2.625em; 
    line-height: 1.3; 
    margin: 0; 
    font-weight: 300; 
} 

header h1 span { 
    font-size: 60%; 
    display: block; 
} 

は、コードペンです：http://codepen.io/LittleNooby/pen/mPzdvz

Answer 1

あなたの円の直径に合わせて<span>にline-heightプロパティを設定してみてください。あなたのキャラクター（s）は、行の高さは、実際に「幅」に影響されますと、この設定を適切に要素が円のにまたがるように、適切にセンタリングすることができますのアライメントや向きに

.logo span { 
    font-size: $logoDiameter * 3/8; 
    padding-right: $logoDiameter - ($logoDiameter * 3/8)/4; 
    line-height: $logoDiameter; 
} 

。

あなたはsee an updated CodePen hereと、出力は以下に示すことができます。