How to Center a Horizontal `` Menu Using CSS Floats and a Wrapper?

Centering a Horizontal

Menu

Challenges Faced

While attempting to center align a horizontal menu using a combination of inline-block, block, and center-align, the desired outcome remained elusive.

Proposed Solution From Web

A resource (http://pmob.co.uk/pob/centred-float.htm) proposes a method that involves a wrapper element floated left and shifted offscreen to the left, accompanied by an inner element floated right.

#buttons {
  float: right;
  position: relative;
  left: -50%;
  text-align: left;
}

#buttons ul {
  list-style: none;
  position: relative;
  left: 50%;
}

#buttons li {
  float: left;
  position: relative;
}

#buttons a {
  text-decoration: none;
  margin: 10px;
  background: red;
  float: left;
  border: 2px outset blue;
  color: #fff;
  padding: 2px 5px;
  text-align: center;
  white-space: nowrap;
}

<div>

Conclusion

The provided code effectively centers the

menu within the DIV, shifting the list items to the center of the available space. However, this approach does not address centering the list items themselves within the
element. For that, JavaScript may be required.

The above is the detailed content of How to Center a Horizontal `` Menu Using CSS Floats and a Wrapper?. For more information, please follow other related articles on the PHP Chinese website!