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

Question

I have a div, which contains an article. I mean, it may contain text and images. Something like this:

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.

So, there may not be a div around every image.

But I want to horizontally align center the images with jQuery. My idea is creating a div around every image (with jQuery) with a specific class.

But I don't know how to do that in jQuery.

How to do that? OR Is there any better way?

Edit: The content is downloaded from the feed of another website. And I want to align the images center horizontally.

Answer 1

No need to add div around img it can be done only by css

Try This fiddle

Just use display:block and margin:auto

Answer 2

you can do something like this :

in your case :

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

In jquery you can also use wrap method : http://api.jquery.com/wrap/

Ex: $('img').wrap(' <div class="test"></div> ');

Answer 3

jQuery to wrap all <img> tags with <div class="imageclass"> :

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

CSS to center the <div> :

.imageclass { margin: 0 auto; }

Answer 4

Is your html something like this?

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