响应Div内容

Question

目标：我尝试设置内容样式以响应其父级div的维度。

必需行为

• 根据div容器的不同，内容会对其做出反应并适当缩放。
• 我需要内容始终居中。
• 当有足够的空间放置水平容纳2个容器时，将容器向上移动（例如，JsFiddle：card-container2并排显示图像和卡片信息，但按钮仍然居中。）

我必须满足的条件：

• 我不允许使用任何媒体查询。
• 我不允许使用任何JavaScript
• 必须全部用html和CSS完成。

.product-image-area {
text-align: center;
width: 100%;
max-width: 180px;
display: inline-block;
}

JsFiddle

编辑： 由于我的问题的复杂性，我将说明我已经给出的任务的怪物：

图片：http://i63.photobucket.com/albums/h123/Damian6969/Stack_EXample_zpsmskwkba0.png

所以我在黑色矩形中的html代码（让我们称之为＆＃34;内部＆＃34;容器）将始终是相同的。

此内部容器的宽度始终为100％，高度为100％。

橙色容器（＆＃34;外部＆＃34;容器）的尺寸会发生变化。

我需要我的内部容器响应。

......我不知道我是否可以简化这个人了。另一个例子是响应代码。但是，不是视口，而是只有一个外部div。

Answer 1

使用

创建外部容器

text-align: center;

然后给你的内部容器

display: inline-block;

请参阅Fiddle

Answer 2

我仍然不确定你要修复的是什么，但这就是我所做的调整内容：

.c-product-card {
    ...
    padding: 10px;
    text-align: center;
}
.card-info {
    ...
    text-align: left;
}

<强> Demo