Question

我有一个div，其中包含一篇文章。我的意思是，它可能包含文本和图像。像这样：

Blah Blah Blah Blah    Blah Blah Blah Blah    Blah Blah Blah Blah
Blah Blah Blah Blah    Blah Blah Blah Blah    Blah Blah Blah Blah
Blah Blah Blah Blah    Blah Blah Blah Blah.
{IMAGE}
Blah Blah Blah Blah    Blah Blah Blah Blah    Blah Blah Blah Blah
Blah Blah Blah Blah    Blah Blah Blah Blah    Blah Blah Blah Blah.
{IMAGE}
Blah Blah Blah Blah    Blah Blah Blah Blah.

因此，每张图片都可能没有div。

但我想用jQuery水平对齐图像中心。我的想法是围绕每个图像（使用jQuery）创建一个带有特定类的div。

但我不知道如何在jQuery中这样做。

怎么做？ OR 还有更好的方法吗？

修改：内容从其他网站的Feed中下载。我希望水平对齐图像。

Answer 1

无需在img周围添加div，只能通过css

完成

试试这个fiddle

只需使用display:block和margin:auto

即可

Answer 2

你可以这样做：

在你的情况下：

$（”试验 '）附加（$（' ＃图像1' ））;

在jquery中，您还可以使用 wrap 方法： http://api.jquery.com/wrap/

Ex：$（'img'）。wrap（'<div class="test"></div>'）;

Answer 3

jQuery用<img>包装所有<div class="imageclass">标签：

$('img').wrap('<div class="imageclass" />');

CSS以<div>：

为中心

.imageclass { margin: 0 auto; }

Answer 4

你的HTML是这样的吗？

<div id="container">
    <div id="column1">
        article text article text
        <img />
        article text article text
    </div>
    <div id="column2">
        article text article text
        <img />
        article text article text
    </div>
    <div id="column3">
        article text with no image
        article text with no image
        article text article text
    </div>
</div>

使用jQuery在文本中水平对齐图像

4 个答案: