Css 如何使图像和浮动文本在左右两侧居中？

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

---

我知道你不能

float:center从快速的网络搜索中，每一个推荐的解决方案都有点像黑客。那么，我如何为这种特定情况设置css呢？我正在使用Twitter引导，不管它值多少钱（在这种情况下可能什么都没有）。
你可以
float:left
所有3列的宽度百分比。大概是这样的：

#col1，#col2，#col3{
浮动：左；
} 
#col1，#col3{
宽度：25%；
}
#可乐{
宽度：50%；
文本对齐：居中；
}

另外，如果您使用的是Twitter引导，您可能希望使用带有3列的。
希望您可以使用固定宽度的图像。然后可以使用
position:absolute
和负片
margin
将图像居中。
然后你可以选择
浮动
两边的反应

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

您可能需要为容器设置一个最小高度：如果没有反应，它将完全折叠，忽略图像/中间列

反应的最大宽度也可能是必要的。然后，它们将适合两侧的开放空间。
如果您不关心设计的响应性，并且容器和居中图像大小是恒定的（独立于视口），那么您可以绝对定位所有元素：

<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>

诀窍是将IE部分与“其他”部分混合在一起，即IE无法读取的样式前缀为
#

请注意，这样您可以调整容器的不同大小，但居中图像不会相应地更改其大小

好的方法（简单且可移植）是使用居中图像作为背景。尝试使用：

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

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

更新：如果您不希望图像放大，背景方法不允许相应地缩小图像：（
谢谢，这是可行的，但很难实现，因为响应的数量（文本气泡）可能会有所不同。因此，如果响应的数量大于2，我需要添加逻辑来检查并创建新行。如果有两个以上的响应，则第二行将难以实现…您熟悉绝对定位吗？在您的情况下，这是否可行？
#row {
  background-image: url(img/image.png);
  background-position: center center;
  background-repeat: no-repeat;
}