CSS文本在背景图像的中心。

how can I center text on following (Sorry I'm new to CSS):

如何将文本居中(对不起，我是CSS的新手):

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:

html:

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

Also it would be nice if you tell me the best practices of how to do this :)

如果你能告诉我如何做到这一点的最佳实践，那就太好了。

3 个解决方案

#1

Set text-align: center; to center the text horizontally, and set line-height: [heightofbox]; to center the text vertically.

设置text-align:中心;水平居中，设置行高:[heightofbox];将文字垂直居中。

Here is a simple example of that

这里有一个简单的例子

---

Note that, if you are working with invalid HTML elements, you need to set them as block elements. So, this should do the trick:

注意，如果使用的是无效的HTML元素，则需要将它们设置为块元素。所以，这应该能达到目的:

customEl {
  display: block;
  ...
}

#2

You can remove suggestion_active_text..

您可以删除suggestion_active_text . .

Have one div with background image. inside that div do like this

有一个带背景图像的div。在这个div里面是这样的

<div style="text-align:center"> 1 </div>

give background image for above thats it

给上面的背景图片

#3

Add the following to both of your tags and it should do the trick:

在您的两个标记中添加以下内容，它应该可以达到以下目的:

display: block;
width:100px;