Hello, anyone can help me with centering the text content attached below so that it centers in height as well in the container div? The css for the div is below:

div.level-1-menus {
    background: url("background_menu.png") no-repeat scroll 0 0 transparent;
    display: table-cell;
    float: left;
    height: 45px;        
    text-align: center;
    vertical-align: middle;
    width: 130px;


I took a look at your example, and I think the issue is related to the float property. When I exclude the float, the text centers vertically.

Here is my example...

<!DOCTYPE html>

 .container { display: table;}
 .vTableCell { 
    display: table-cell;
    vertical-align: middle; 
    background: url("background_menu.png") no-repeat scroll 0 0 transparent;

<div class="container">
   <div class="vTableCell">Centered</div>




I have some additional examples you can take a look at:
How to Vertically Center Content Using CSS
How to Horizonally Center Content Using CSS

The line-height code did the trick as Troy III mentioned in the code

JorgeM, I need the float as I have several similar menus which need to follow on the same line

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.