文字形状非常规

Question

请查看SAMPLE。

我希望我的文字“是最好的团队吗？”完全在div中并与中心对齐。 没有任何东西来自主要的div。

知道我可能会错过什么吗？

Answer 1

试试这个：

HTML：

<div class="badge"><div id='anotherDiv'>Is The Best Team?</div></div>

的CSS：

.badge {
  height: 100px;
  width: 100px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-top-right-radius: 100%;
  background: red;
}
#anotherDiv
{
  font-size:12px;
  padding-right:20%;
  padding-top:15%;
}

Answer 2

更改'.badge'类：

使用border-top-right-radius: 50%使文本适合div。

或者使用：vertical-align: bottom使文本转到父元素的底部，然后您可以在文本中添加一些margin-bottom，使其看起来像“居中”。

Answer 3

对我来说重要的是反应方向。调整大小并更改圆的曲率。 div内的文字保持其位置。