0

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

Attachments
3
Contributors
3
Replies
20
Views
4 Years
Discussion Span
Last Post by Ritesh_4
0

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

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.