响应式 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 代码（我们称之为“内部”容器）将始终相同。

这个内部容器总是有 100% 的宽度和 100% 的高度。

橙色容器（“外部”容器）的尺寸会发生变化。

我需要我的内部容器反应灵敏。

...我不知道我是否可以再简化这个了。另一个例子是一般的响应式代码。但是，您只有一个外部 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