Member Avatar for Ritesh_4

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

  • 3 Contributors
  • 3 Replies
  • 255 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Ritesh_4
Member Avatar for JorgeM

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

Member Avatar for Ritesh_4

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

Edited by Ritesh_4
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.