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;
}
Jump to Postif "menu-item" is a one-liner, you can:
check this : http://jsfiddle.net/8fySf/
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...
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
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.