Question

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

现在，我想确保文字必须位于中心的图像下方。如果我有一个<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;
}

以下是图片 <div class="sidebyside_image">

的CSS

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

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

1 个答案: