如何在弹性容器中居中卡片

Question

我想将这些卡片恰好放在浅蓝色背景的中间。而且当我缩小浏览器时，卡片之间的 space 也应该减少。（我正在使用 Chrome。）

我的 style.css 文件不起作用

.flex-item{
    height: 350px;
    width: 250px;
    background-color: white;
    text-align: center;
    margin: 15px;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: 0px 5px 25px #aaa;
    border-radius: 10px;
}


.flex-container{
    display: flex;
    webkit-justify-content: center;
    height:380px;
    background-color: lightblue;
    }

HTML:

       <!-- cards -->
   <div class="flex-container">
       <div class="row">
          <div class="col-md-3 flex-item" >
             <img src="bg.jpg" class="img img-responsive" style="margin-bottom:5px; margin-top:10px; border-radius:250px;">
             <legend>Section</legend> 
             <p>Lorem ipsum dolor sit amet glo dlbogn</p>
             <button class="btn btn-success btn-sm" style="float:right;" >Read More</button>
          </div>
          <div class="col-md-3 flex-item" >
             <img src="bg.jpg" class="img img-responsive" style="margin-bottom:5px; margin-top:10px; border-radius:250px;">
             <legend>Section</legend>
              <p>Lorem ipsum dolor sit amet glo dlbogn</p>
              <button class="btn btn-success btn-sm" style="float:right;" >Read More</button>
          </div>
          <div class="col-md-3 flex-item" >
             <img src="bg.jpg" class="img img-responsive" style="margin-bottom:5px; margin-top:10px; border-radius:250px;">
             <legend>Section</legend>
             <p>Lorem ipsum dolor sit amet glo dlbogn</p>
             <button class="btn btn-success btn-sm" style="float:right;" >Read More</button>
          </div>
       </div>
    </div>

Answer 1

这里有一个工作正常的例子

.flex-container {
  background-color: lightblue;
   height:380px;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-item {
    background-color: white;
    padding: 5px;
    height: 350px;
    width: 250px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
    margin: 15px;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: 0px 5px 25px #aaa;
    border-radius: 10px;
}

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


</div>

Answer 2

将 .flex-container 移动到与 .row 相同的元素。

因为你的 .flex-item 是 inline-block 而不是应用。

.flex-container {
    text-align: center;
}

对于 space 你的牌 - 使用百分比：

.flex-item + .flex-item {
    margin-left: 2%;
}

删除 bootstrap 浮动 col- 类:

.flex-item {
    float: none;
}

它将为除第一个以外的所有 .flex-item 添加保证金。

示例：

.flex-container {
  width: 100%;
  height: 250px;
  background-color: rgba(0, 0, 150, .3);
  text-align: center;
}
.flex-item {
  box-sizing: border-box;
  border: 1px solid #ddd;
  background-color: rgba(0, 150, 0, .3);
  display: inline-block;
  width: 150px;
  height: 250px;
}
.flex-item + .flex-item {
  margin-left: 2%;
}

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

Answer 3

您只需要对当前代码进行一些更正。

.flex-container {
   display: flex;
   justify-content: center;
   height: 380px;
   background-color: lightblue;
}

如何在弹性容器中居中卡片

How to center cards in a flex container

css

center

flexbox

twitter-bootstrap