在浏览器调整大小下面的浮动后居中div

Question

我有以下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;
}

我正在为container page-header row和span3/5使用bootrap。当我调整以下浏览器的大小时，将{300} #activity_text位置放在#activity下面，这就是我想要的。

我正在使用媒体查询，我希望当文本的细分位于img下方时，img会在文本上方居中并保持下面所有宽度的方式（使用媒体查询）。

尝试多种方法后，我不确定CSS是否能够完成这项工作。谢谢你的关注。请查看附件。

注意：更改背景颜色以帮助注意媒体查询断点

Answer 1

在特定的媒体查询中，你只需删除任何花车，给它一个宽度＆amp;保证金：汽车。例如在您想要的媒体查询max-width：

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

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

此外，我还不确定当时activity_text是否会自动进入底层，所以这里是你需要在相同的媒体查询中使用的CSS：

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