背景文本中心的CSS文本

Question

如何将文本集中在以下内容（对不起，我是CSS新手：]

CSS：

suggestion_active { 
    background-image: url(../images/suggestion_active.jpg);
    background-repeat:no-repeat;
    position:inherit;
    float:inherit;
    width: 100px; 
    height: 36px;
}

suggestion_active_text {
    possition: absolute;
    font-family: "Lucida Grande", Tahoma;
    font-size: 12px;
    font-weight: lighter;
    text-align: center;
    color:#000;
    vertical-align: middle;
    padding:0px;
}

HTML：

 <suggestion_active><suggestion_active_text>1</suggestion_active_text></suggestion_active>

另外，如果您告诉我如何执行此操作的最佳做​​法，那也很好：）

Answer 1

设置text-align: center;以使文本水平居中，设置line-height: [heightofbox];以使文本垂直居中。

这里是一个简单的example

---

[请注意，如果要使用无效的HTML元素，则需要将它们设置为块元素。因此，这应该可以解决问题：

customEl {
  display: block;
  ...
}

Answer 2

您可以删除proposalation_active_text。。>

具有背景图片一格。在那个div里面做这个

<div style="text-align:center"> 1 </div>
为以上提供背景图像

Answer 3

将以下内容添加到两个标签中，它应该可以解决问题：

Answer 4

我认为Flex的效果更好，您可以使其在两个方向上居中对齐。

Answer 5

也许有更现代的答案？