在框内居中图像，内容如下答案

【问题标题】：Centering image within box with content below在框内居中图像，内容如下
【发布时间】：2013-08-25 20:51:13
【问题描述】：

我目前正在建造这个盒子，女巫必须有反应。但是768px以下的图片分辨率是一样的。

我可以使图像居中（在这个例子中只是一个正方形），但我想要下面的内容，但是使用这种方法，将 position: absolute 添加到<img>（例如：div）<p> 元素将是绝对的。。

如何在图片下方浮动<p>？

jsfiddle

【问题讨论】：

所以你想有一个居中的 div 和它下面的一个段落？

标签： html css image center centering

【解决方案1】：

改用这个css：

.container-center > div {
    width: 270px;
    height: 188px;
    background-color: green;
    /*Centering*/
    margin: 0px auto;
}

http://jsfiddle.net/SmBXR/1/

【讨论】：

这在小提琴中工作正常，但实际上这不起作用。还是一样。
我正在使用引导程序。所以容器是一个行流体
我只能根据您给出的代码回答您的问题。如果您的网站上有不同的代码，那么您应该显示它。

【解决方案2】：

试试这个。这将使绿色框下方的文本居中。

.container {
border: 1px solid black;
}

.container p {
position: relative;
margin: 0px auto;
text-align:center;
}

.container-center > div {
width: 270px;
height: 188px;
background-color: green;
position: relative;
/*Centering*/
margin: 0px 0 0 -135px;
left: 50%;
}

【讨论】：

你指的是你的生活环境还是小提琴？查看 jsfiddle：jsfiddle.net/SmBXR/3
到我的生活环境。
在示例中有效，很难知道您在实际环境中发生了什么。能不能给个链接？
No.. 这是一个我正在重新设计的大项目，所以.. 我无法展示实时版本。
但这是一个块，其中有一个图像，下面有一个标题和文本。当我们将大小调整到 768px 以下时，所有文本都位于图像下方（之前，它们是水平对齐的），之后图像必须保持居中。