Question

我试图将列水平居中，并尝试通过自举列进行居中，但在使没有完整行的列居中时遇到困难。我更喜欢使用flexboxs来解决这个问题，但是也可以接受其他解决方案。

尝试完成：

我尝试了几种不同的方法，其中一种是（jsfiddle）。这已经很接近了，但是想知道是否有办法从中心开始新行的工作吗？

我当前拥有的代码：

HTML

<div class="list">
    <div class="col-3 mx-auto">
        <div class="card card-body mb-2">
            <h6>I'm .col-4</h6>
        </div>
    </div>
    <div class="col-3 mx-auto">
        <div class="card card-body mb-2">
            <h6>I'm .col-4</h6>
        </div>
    </div>
    <div class="col-3 mx-auto">
        <div class="card card-body mb-2">
            <h6>I'm .col-4</h6>
        </div>
    </div>
    <div class="col-3 mx-auto">
        <div class="card card-body mb-2">
            <h6>I'm .col-4</h6>
        </div>
    </div>
    <div class="col-3 mx-auto">
        <div class="card card-body mb-2">
            <h6>I'm .col-4</h6>
        </div>
    </div>
    <div class="col-3 mx-auto">
        <div class="card card-body mb-2">
            <h6>I'm .col-4</h6>
        </div>
    </div>
</div>

CSS：

.landing-types .content-list .list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.landing-types .content-list .list .col-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.landing-types .content-list .list .mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

Answer 1

是的，有。只需包装弹性盒并使用justify-content: center（水平居中对齐）和align-items: center（垂直居中对齐）即可。

这是一个最小的工作示例：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Helvetica, sans-serif;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.column {
  width: 13%; /* Change this value to experiment */
  padding: 20px;
  margin: 20px;
  text-align: center;
  background: #000;
  color: #FFF;
}

<div class = "column">
  1
</div>
<div class = "column">
  2
</div>
<div class = "column">
  3
</div>
<div class = "column">
  4
</div>
<div class = "column">
  5
</div>
<div class = "column">
  6
</div>
<div class = "column">
  7
</div>
<div class = "column">
  8
</div>
<div class = "column">
  9
</div>
<div class = "column">
  10
</div>
<div class = "column">
  11
</div>
<div class = "column">
  12
</div>

如果没有，您需要阅读有关flexbox的指南：here

这与flexbox无关，但是我建议您阅读有关网格的信息：here

Answer 2

就这样：

html：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div> 
</div>

css：

.flex-container {
  display: flex;
  flex-direction:row;
   flex-wrap: wrap;
   max-width:350px;
   justify-content:center;



}

.flex-container > div {
  background-color: #194f27;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

检查：https://jsfiddle.net/yfvp5m69/24/

水平居中4列列表

2 个答案: