Home > Article > Web Front-end > How to align css li horizontally and center

How to align css li horizontally and center

藏色散人Original: 2021-02-18 09:57:598096browse

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;".

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use rgb in cssNext article：How to use rgb in css

See more

How to align css li horizontally and center

Related articles