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
  • 271 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Ritesh_4

Dani AI

Generated

As pointed out, floating an element removes it from the normal flow so it will not behave like a table-cell — that is why vertical-align: middle stopped working. 's line-height trick is the simplest fix for a single-line label, but it breaks when text wraps or when inline icons are present. For tiles that must stay on the same row while keeping vertical centering, three robust alternatives follow.

Use flexbox for reliable centering (best for multi-line labels and responsive layouts):

/* parent keeps tiles on one row */
.menu-row { display: flex; gap: 8px; }

/* each tile centers its content */
.level-1-menus {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  width: 130px;
  box-sizing: border-box;
}

Use inline-block when floats must be avoided but inline flow is required (works like floats but with simpler centering):

.menu-row { /* container */
  /* optional: font-size: 0 to remove whitespace gaps between inline-block items */
}

.level-1-menus {
  display: inline-block;
  vertical-align: middle;
  height: 45px;
  width: 130px;
  box-sizing: border-box;
}

Use absolute positioning + transform for precise centering inside a fixed-height tile (handy for icons or mixed content):

.level-1-menus { position: relative; height: 45px; width: 130px; }
.level-1-menus .label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

Notes and trade-offs: line-height equal to container height is the quickest for single-line text but fails with wrapping. Flexbox is the most future-proof and handles multi-line and alignment of icons gracefully. Inline-block preserves horizontal flow without float but may introduce small gaps (fixable via HTML or CSS). Absolute-centering is exact but requires a wrapper and careful handling for variable content.

Recommended Answers

All 3 Replies

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.