Question

how can I center text on following (Sorry I’m new to 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>

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

Answer 1

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

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:

customEl {
  display: block;
  ...
}