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

Posted 2023-03-29

【中文标题】如何在弹性容器中居中卡片

【英文标题】：How to center cards in a flex container

【发布时间】：2016-04-26 01:10:49

【问题描述】：

我想将这些卡片准确地放置在浅蓝色背景的中间。而且当我缩小浏览器时，卡片之间的空间也应该减少。 （我正在使用 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>

【参考方案1】：

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

由于您的 .flex-item 是 inline-block 而不是应用。

.flex-container 
    text-align: center;

卡片周围的空间 - 使用百分比：

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

删除 col- 类的引导浮动：

.flex-item 
    float: none;

它将为除第一个.flex-item 之外的所有.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>

【讨论】：

它的工作.. 谢谢:) 但你能解释一下， text-align 属性如何影响卡片？据我所知，它应该只影响文本。我是新手。

@MD.TAWSIF-UL-KARIMTawsif 它也影响内联元素。这就是为什么它会影响display: inline-block 元素。

【参考方案2】：

这里有一个运行良好的示例

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

【参考方案3】：

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

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