浏览器调整大小后，在浮动下方居中一个 div

Question

I have the following html-

 <div class="container">
  <h1 class="page-header" id="property_head">A cool title</h1> 
  <div class="row text_img">
    <div class="span9">
      <div class="row">
        <div class="span3" id="activity"><img src="http://some/img.png"></div>
        <div class="span5" id="activity_text"><h3 class="text_title">Great Title</h3><br><p class="lead">Foo</p></div>
      </div>
    </div>  
  </div>
 </div>

以下是相关的CSS代码 -

.text_img {
  padding: 30px;
  margin-bottom: 30px;
  margin-left: 100px;

}

#activity {
  float: left;
  margin-right: 30px;
}

#activity_text {
  float: right;
  border:1px solid black;
}

我正在使用Bootstrap来设置container、page-header、row和span3/5。当我调整浏览器大小到小于300像素时，#activity_text会自动移动到#activity下面，这正是我想要的。

我正在使用媒体查询，并希望当文字处于图像下方时，图像能够居中在文本上方，并在所有小于原始宽度的情况下保持这种方式（使用媒体查询）。

试过多种方法后，我不确定如何使用CSS使其工作。感谢您的关注。请查看附件。

注意：更改背景颜色以便更容易观察媒体查询断点。

- computer_smile

Answer 1

在特定的媒体查询中，您只需要删除任何浮动，并为其指定宽度和margin:auto。例如，在您期望的媒体查询max-width处：

#activity {
    float:none;
    width:50%; /* or whatever you want it to be */
    margin:auto;
}

根据Bootstrap CSS的设置，您可能需要在上面的一个或所有CSS中添加!important，以确保在该媒体查询点上它执行您想要的操作。

此外，我不确定activity_text是否会自动放在下面，因此在同一媒体查询中，这是您需要的CSS：

#activity_text {
    float:none;
    width:100%;
}

- Andy