New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

单行居中多行居左布局 #1

Open

simonyouth opened this issue Jul 1, 2019 · 0 comments

Owner

simonyouth commented Jul 1, 2019 •

edited

Loading

实现居中自适应居中，当元素不满一行时居中对齐，超过一行看似居左对齐

多行时：

一行：

原理是父元素中使用text-align:center使子内联元素居中。一级子元素是内联元素，其子元素将其撑满，不满一行时显示效果是居中。超过一行时一级子元素的width等于其父元素的width，显示效果居左。

那么，块级元素需要使用margin: 0 auto来实现一样的效果。

<body>
  <div class="container">
    <div class="flex-box">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</div>
</body>

body {
  width: 100%;
}

.container {
  text-align: center;
}

.flex-box {
  display: inline-flex;
  flex-wrap: wrap;
}

.item {
  margin-top: 10px;
  margin-right: 10px;
  width: 100px;
  height: 100px;
  border: 1px solid forestgreen;
}

The text was updated successfully, but these errors were encountered:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment