css - 如何使图像居中并在左右浮动文本？

Question

我想使图像居中，然后将文本（或按钮）左右浮动，因为它的线框如下：

我知道你不能float: center;，并且通过快速的网络搜索，每个推荐的解决方案都有点小窍门。那么如何为这种特定情况设置 css 呢？我正在使用 Twitter Bootstrap 来做任何有价值的事情（在这种情况下可能什么都没有）。

Answer 1

您可以float: left使用百分比宽度的所有 3 列。像这样的东西：

#col1, #col2, #col3 {
     float: left;
} 

#col1, #col3 {
    width: 25%;
}

#col2 {
    width: 50%;
    text-align: center;
}

此外，如果您使用 Twitter Bootstrap，您可能希望使用具有 3 列的流体网格系统。

Answer 2

如果您不关心设计的响应能力并且容器和居中的图像大小是恒定的（独立于视口），那么您可以绝对定位所有元素：

<div style="position: relative;">
  <div style="position: absolute; top: HEIGHT_OF_THE_VIEWPORT_MINUS_HEIGHT_OF_THE_IMAGE_DIVIDED_BY_2; left: WIDTH_OF_THE_VIEWPORT_MINUS_WIDTH_OF_THE_IMAGE_DIVIDED_BY_2;">
    <img src="..." />
  </div>
</div>

在响应式布局中，您将不得不处理未知大小的容器和未知大小的居中图片。

您可以使用text-align: center;和margin: 0 auto;样式轻松地水平居中。

在 CSS 中垂直居中是一个棘手的部分。您可以使用display: table;and vertical-align: middle;("table method") 但您会遇到 Internet Explorer 的问题。“负边距”和“定位”方法在 IE 中有效。在 Google 中搜索“vertical align css”显示了许多有用的讨论，但我建议将这两种先前的方法（参见这篇文章）结合起来，这适用于好的浏览器和 IE >= 6：

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div class="greenBorder" style=" #position: relative; #top: -50%">
      some<br/>
      content
    </div>
  </div>
</div>

诀窍是将 IE 部分与“其他”部分混合在一起，IE 不读取的样式以#.

请注意，这样您将适应不同大小的容器，但居中的图像不会响应地改变其大小。

好的方法（简单便携）是使用居中的图像作为背景。尝试使用：

#row {
  background-image: url(img/image.png);
  background-position: center center;
  background-repeat: no-repeat;
}

具有引导布局的 css 分隔左中列和右列（#col1和#col2）#col3。您将获得水平和垂直居中的图像。

更新：如果您不希望它放大（放大），背景方法不允许响应地缩小图像：（

Answer 3

希望您可以使用固定宽度的图像。然后，您可以使用postion: absolute负片margin使图像居中。然后，您可以选择float对任一侧的反应。

这是它在模型中的外观： jsFiddle

您可能需要为容器设置最小高度：如果没有反应，他将完全崩溃，忽略图像/中间列。

可能还需要反应的最大宽度。然后它们将适合两侧的开放空间。