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;


Recommended Answers

if "menu-item" is a one-liner, you can:
check this : http://jsfiddle.net/8fySf/

Jump to Post

All 3 Replies

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 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.