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>
<p><strong>Conclusion</strong></p>
<p>The provided code effectively centers the </p>
<ul> 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 <ul> element. For that, JavaScript may be required.</ul>
</ul>
</div>

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!