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];为垂直居中文本.

下面是一个简单的例子那

请注意,如果您使用的是无效的HTML元素,则需要将它们设置为块元素.所以,这应该做的伎俩:

customEl {
  display: block;
  ...
}