How to align css li horizontally and center-CSS Tutorial-php.cn

How to align css li horizontally and center

藏色散人

Release： 2023-01-03 09:23:39

Original

8120 people have browsed it

Css li horizontal center alignment method: first create an HTML sample file; then define the li tag; finally achieve horizontal center alignment through attributes such as "overflow: hidden; margin: 100px auto;".

How to align css li horizontally and center

The operating environment of this article: windows7 system, HTML5&&CSS3 version, DELL G3 computer.

css method to achieve the horizontal centering effect of multi-column li elements

Share a code example, which achieves the horizontal centering effect of multi-column li elements.

The horizontal centering here is actually the uniform distribution effect of li elements.

Code examples are as follows:

<!doctype html><html>
<head>
<meta charset="utf-8">
<style>
* {
  margin: 0;
  padding: 0;
}
.main {
  width: 1180px;
  height: auto;
  margin: 100px auto;
  border: 1px solid #f00;
  overflow: hidden;
}
.main ul {
  width: 1120px;
  list-style: none;
  margin: 0 auto;
}
.main ul li {
  width: 100px;
  height: 100px;
  margin-right: 20px;
  margin: 20px;
  background: #f00;
  float: left;
}
</style>
</head>
<body>
<div class="main">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
</body>
</html>

Copy after login

Rendering:

How to align css li horizontally and center

The above code achieves our requirements. Here is a brief introduction to it. Realization principle.

Set the width of the ul element equal to the width of the li element plus the value of the margin. Assume that this value is represented by w. The width of

ul's parent element is w-margin-right (20px), and this parent element has the overflow:hidden attribute, then the excess margins will be hidden.

Recommended: "css video tutorial"

The above is the detailed content of How to align css li horizontally and center. For more information, please follow other related articles on the PHP Chinese website!