响应问题：图像（向左浮动）和 div -> 图像（中心）和 div 下答案

【问题标题】：Responsive issue : image (float left) and div -> image (center) and div under响应问题：图像（向左浮动）和 div -> 图像（中心）和 div 下
【发布时间】：2015-10-08 05:49:34
【问题描述】：

我有一个小问题。我有一个带有float: left; 的图像，然后是一个带有文本的 div。结果是这样的：https://css-tricks.com/wp-content/csstricks-uploads/web-text-wrap.png

这很棒。但是当屏幕变小了，最后，因为图片只有250px大，左边是图片，右边是几个字。我想在图像下“推”带有 test 的 div 并同时将图像居中：当屏幕大时，例如 400px 大。

我该怎么做！？这似乎很容易，但我尝试过的所有 tutos 或 codepen 都让我感到困惑......

谢谢

【问题讨论】：

你有你的标记和相关的 CSS 给我们看吗？

标签： css responsive-design css-float

【解决方案1】：

研究media tags 我认为它们正是您正在寻找的。p>

所以你的 css 会变成这样：

@media all (width: 400px){
    .image{
        ...
        margin: 0 auto;
    }
}

【讨论】：

呃，没有position: center这样的东西。

【解决方案2】：

感谢不断的困惑和smoggers。

我使用了 smoggers 的代码，没有按预期工作，但它是尝试寻找解决方案的完美基础：

.images {float: left;}


@media screen and (max-width: 400px) {
  .images {
    float: none;
    width: auto;
    display: table;
    margin: 0 auto;
    padding-bottom: 5%;
  }
}

再次感谢。

【讨论】：