如何在左侧和右侧居中放置图像和浮动文本？

-1

我要居中图像，然后浮动文本（或按钮）左，右，因为它的下面wireframed：如何在左侧和右侧居中放置图像和浮动文本？

enter image description here

我知道你不能float: center;和快速的Web搜索每推荐解决方案有点破解。那么我怎么能为这个特定的情况设置css呢？我使用Twitter Bootstrap来获取任何有价值的东西（本例中可能没有任何内容）。

2013-01-08 kwh941

你熟悉绝对定位，在您的情况下工作 –

你可以float: left所有3列与百分比宽度。事情是这样的：

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

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

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

此外，如果你正在使用Twitter的引导，你可能需要3列使用Fluid Grid System。

来源

2013-01-08 16:27:07

感谢这个工作，但很难实现，因为响应的数量（文本气泡）可能会有所不同，所以我需要添加逻辑来检查和创建新的行，如果响应的数量> 2。如果有多于两个响应，那么第二行变得难以执行...... – kwh941

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

这里是它的外观在样机： jsFiddle

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

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

来源

2013-01-08 21:13:09 woestijnrog

如果你不关心你的设计的响应和容器和居中的图像尺寸是不变的（独立于视口），那么你可以绝对位置的所有元素：

<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中可用。搜索在谷歌“垂直对齐CSS”显示了许多有用的讨论，但我推荐的这适用于好的浏览器，也即两个以前的方法（见this article）组合> = 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部分与“others”部分混合在一起，IE不能读取的格式前缀为#。

请注意，这种方式您将调整到不同的容器大小，但居中的图像不会响应地改变其大小。

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

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

用CSS布局白手起家分隔左，右列（#col1，#col2和#col3）。您将获得水平和垂直居中的图像。

更新：？？后台方法不允许响应缩小图像，如果你不希望它扩大（扩大）:(

来源

2013-01-08 21:35:16

如何在左侧和右侧居中放置图像和浮动文本？

回答

相关问题