Question

我希望将图像居中，然后将文本（或按钮）向左和向右浮动，因为它在下面有线框架：

enter image description here

我知道你不能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，则可能需要使用Fluid Grid System和3列。

Answer 2

希望您可以使用固定宽度的图像。然后，您可以使用postion: absolute和否定margin来使图像居中。然后你可以float对任何一方的反应。

以下是它在模型中的外观： jsFiddle

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

反应的最大宽度也可能是必要的。然后他们将适应两侧的空地。

Answer 3

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

<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;和vertical-align: middle;（“表格方法”），但您将遇到Internet Explorer问题。 “负边距”和“定位”方法适用于IE。在Google中搜索“vertical align css”显示了许多有用的讨论，但我建议结合两种先前的方法（参见this article），这些方法适用于优秀的浏览器以及IE＆gt; = 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;
}

使用bootstraps布局分隔左中和右列（#col1，#col2和#col3）的CSS。您将使图像水平和垂直居中。

更新：如果您不想放大（放大），背景方法不允许响应缩小图像:(

如何将图像居中左右浮动？

3 个答案: