所有瀏覽器居中跨度和字母相對於他的父母

我試圖使用來自本機字體的兩個日語字符的圖標。所有瀏覽器居中跨度和字母相對於他的父母

我做了一個div容器的圓圈，它是包含兩個字母的跨度的父親。

我想將跨度的幾何中心重疊在跨度的幾何中心（跨度包含字寬和高度）。

我設法做到了這一點，但它不支持其他瀏覽器（至少它不適用於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

來源

2016-04-27 Adrien Horgnies

嘗試設置你的<span>的line-height屬性來匹配您的圓的直徑。

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

由於你的性格（S），該行高度實際上將影響到「寬度」和設置這個不好就會使該元件與圓的跨越，並適當居中對齊和方向。

可以see an updated CodePen here輸出以下證明：

來源

2016-04-27 17:38:42

所有瀏覽器居中跨度和字母相對於他的父母

回答

相關問題