在浏览器调整大小后浮动后将 div 居中答案

【问题标题】：Centering a div after a float underneath on browser resize在浏览器调整大小后浮动后将 div 居中
【发布时间】：2012-11-11 13:42:27
【问题描述】：

我有以下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 使用引导程序。当我为 ex 300px #activity_text 调整下面的浏览器大小时，将其自身定位在 #activity 下方，这就是我想要的。

我正在使用媒体查询，我希望在将文本定位在 img 下方时，让 img 在文本上方居中并在下面的所有宽度中保持这种状态（使用媒体查询）。

在尝试了多种方法后，我不确定 CSS 是否可以完成这项工作。感谢您的关注。看附件

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

【问题讨论】：

标签： html css media-queries

【解决方案1】：

在特定的媒体查询中，您只需要删除任何浮动，给它一个宽度和边距：auto。例如在您想要的媒体查询最大宽度：

#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%;
}

【讨论】：