如何将图像下方的元素中的文本居中

Question

我有两个<div>s,其中图像存在于一个中,文本存在于另一个中.

现在,我想确保文本必须位于中心的图像下方.如果我有一个<div>它会很容易,但我应该使用现有的结构,其中包含<div>文本和图像的单独的s.

现在,我已经为这个文本编写了这样的CSS <div class="sidebyside_pera">

.sidebyside_pera p {
    background:blue;
    float:left;
    text-align:center;
    margin:0 auto;
    position:relative;
    margin-left:-70px;
    margin-top:110px;
}

下面是图像的CSS <div class="sidebyside_image">

.sidebyside_new {
    float:left;
}

上面的CSS适用于固定预设尺寸的图像.如何为变量图像的图像设置CSS,以便文本位于中心的图像下.

这是我目前的结构:

<div class="sidebyside_new">
    <img src="<%=imageLink %>" alt="<%=altText %>" width="<%=imgwidth %>" height="<%=imgheight %>" />
</div>
<div class="sidebyside_pera">
   <p> <%=description %> </p>
</div>

Answer 1

将div(一个带有图像,另一个带有文本)包装在另一个div中应该可以正常工作.

<div class="container">
    <div class="image">
        <img src="image.jpg" />
    </div>
    <div class="text">
        <p>Some text</p>
    </div>
</div>

http://jsfiddle.net/PaulvdDool/VVQxZ/