特定の形状の垂直方向の整列CSS

Question

すでにこのスレッドをチェックしましたIs it possible to vertically align text within a div?

しかし、それは私のためには機能しません。私はテキストを楕円の中央に置いておきたいが、うまくいかない。たぶんそれは別の形ですか？楕円形で動作するようにコーディングする方法はありますか？テキストは水平にセンタリングされますが、垂直にはセンタリングされません。

HTML：

<div class="oval"> <span> Strawman </span> </div> 

はCSS：

.oval { 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    display: inline-block; 
    box-sizing: content-box; 
    width: 200px; 
    height: 50px; 
    padding: 5px; 
    border: none; 
    -webkit-border-radius: 47%/50%; 
    border-radius: 47%/50%; 
    font: normal 100%/normal "Courier New", Courier, monospace; 
    color: white; 
    text-align: center; 
    vertical-align: middle; 
    -o-text-overflow: clip; 
    text-overflow: clip; 
    background: #99cc00; 

} 


.oval span { 
    vertical-align: middle; 
} 

Answer 1

このスタイルシートを試してみて、それがあなたに

<style> 
     .oval { 
      -webkit-box-sizing: content-box; 
      -moz-box-sizing: content-box; 
      display: table; 
      box-sizing: content-box; 
      width: 200px; 
      height: 50px; 
      padding: 5px; 
      border: none; 
      -webkit-border-radius: 47%/50%; 
      border-radius: 47%/50%; 
      font: normal 100%/normal "Courier New", Courier, monospace; 
      color: white; 
      text-align: center; 
      vertical-align: middle; 
      -o-text-overflow: clip; 
      text-overflow: clip; 
      background: #99cc00; 
     } 

     .oval span { 
      display: table-cell; 
      vertical-align: middle; 
     } 

    </style>