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;
}

985bdb55e01fa056d54e7100c07727c9

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>
<html>
<head>
 <title>Demo</title>

 <style>
 .container { display: table;}
 .vTableCell { 
    display: table-cell;
    vertical-align: middle; 
    height:45px;
    background: url("background_menu.png") no-repeat scroll 0 0 transparent;
    color:yellow;
    width:130px;
    text-align:center;}
</style>

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

</body>
</html>

Results...

d9b02430efdd06422b0f118c266fbce8

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.