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

Question

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

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

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

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