W3 CSS：行内的中心卡片答案

【问题标题】：W3 CSS : Center Cards within RowW3 CSS：行内的中心卡片
【发布时间】：2020-09-10 11:48:55
【问题描述】：

我正在使用 W3.CSS 框架并尝试将两张卡片居中，如下图所示。

当视口较大或中等大小时，我希望卡片彼此相邻放置。在小视口上，我希望它们将一个堆叠在另一个之上。无论如何，尽我所能，我就是无法实现这种布局。我可以让卡片彼此相邻放置，但它们不会在行内居中，或者我可以让它们居中，但无论视口大小如何，它们都会堆叠在一起。

这里有一些示例代码作为起点。

 <div class="w3-row w3-padding w3-border w3-gray" style="margin:auto">
    <div class="w3-card" style="width:35%;">
        <p>w3-card</p>
    </div>

    <div class="w3-card" style="width:35%;">
        <p>w3-card</p>
    </div>
</div>

我尝试了很多不同的方法来使用网格、布局和显示控件实现所需的结构，但没有任何效果。

提前感谢您的提示或解决方案。

【问题讨论】：

标签： html css row center w3.css

【解决方案1】：

试试这个：

<div class="w3-padding-large w3-border w3-gray">
<div class="w3-cell-row w3-content" style="width:70.5%">
    <div class="w3-cell w3-mobile w3-container w3-card w3-blue">
        <p>w3-card</p>
    </div>
    <div class="w3-cell w3-mobile" style="padding:0.1em"></div>
    <div class="w3-cell w3-mobile w3-container w3-card w3-blue">
        <p>w3-card</p>
    </div>
</div>    
</div>

（注意：中间的单元格仅用于“美学”。70.5的值是任意的，因为包含了这个额外的单元格。）

【讨论】：

我选择了第一个答案，但你的也很好。非常感谢。
好的。请记住重命名修改后的类以避免“附带影响”;-)

【解决方案2】：

这是一个非常基本的方法，将它们设置为 inline-block 并将它们设置为以 px 为单位的最小宽度，这样当屏幕变小时它们会被截断。这是要玩的 jsfiddle：https://jsfiddle.net/trw530q1/

.w3-card {
  display: inline-block;
  background-color: blue;
  min-width: 200px;
}

.w3-gray {
  text-align: center;
}

<div class="w3-row w3-padding w3-border w3-gray" style="margin:auto">
    <div class="w3-card" style="width:35%;">
        <p>w3-card</p>
    </div>

    <div class="w3-card" style="width:35%;">
        <p>w3-card</p>
    </div>
</div>

【讨论】：

我在卡片的底部添加了一点边距，以便堆叠时它们之间有一点空间，但您的解决方案简单而优雅。谢谢。
没问题。很高兴能帮上忙。