使用 jQuery 水平对齐文本内的图像答案

【问题标题】：Horizontally align images inside text with jQuery使用 jQuery 水平对齐文本内的图像
【发布时间】：2012-08-21 14:38:15
【问题描述】：

我有一个 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 中做到这一点。

如何做到这一点？或者有没有更好的办法？

编辑：内容是从另一个网站的供稿中下载的。我想水平对齐图像中心。

【问题讨论】：

您是否尝试在 div 中添加图像，如下所示：$div = $('div'); $div.addClass('test'); $div.append('');这看起来像这样：
@Aby，html中已经有图片标签了。我希望 jQuery 检测到它们，并在其前附加 <div class="test"> 和在其后附加 </div> 之类的内容。
+1'ed - 因为这是一个公平的问题，人们不讲道理

标签： javascript jquery html css

【解决方案1】：

不需要在img周围加div，只需要css就可以了

试试这个fiddle

只需使用display:block 和margin:auto

【讨论】：

您的解决方案非常简单，而且很有效！非常感谢！
@MahdiGhiasi：同意，但我回答的正是你最初想要的 ^^

【解决方案2】：

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

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

CSS 将<div> 居中：

.imageclass { margin: 0 auto; }

【讨论】：

谢谢。我已经在 jsfiddle 中尝试过你的代码：jsfiddle.net/8fe6S/2 你的 jQuery 运行良好，但你的 css 应该是：.imageclass { text-align:center; }，我想。
@MahdiGhiasi margin: 0 auto; 应该在浏览器中工作； jsFiddle 在 CSS 上并非万无一失

【解决方案3】：

你可以这样做：

在你的情况下：

$('.test').append($('#image1'));

在 jquery 中你也可以使用 wrap 方法： http://api.jquery.com/wrap/

例如：$('img').wrap('<div class="test"></div>');

【讨论】：

您想要“使用特定类围绕每个图像（使用 jQuery）创建一个 div。”仪式？

【解决方案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>

【讨论】：

是的，但<div id="columnx"> 可能不存在。
我认为除非有一些疯狂的布局情况，否则使用 CSS 而不是 jquery 会更好
你应该在你的问题中包含一些代码，真的很难看到你试图提出什么建议。