特定形状的垂直对齐 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>

特定形状的垂直对齐 CSS

Vertical aligning in specific shapes CSS

html

css

shape

alignment