How can I wrap selected image with html

How can I wrap selected image with html

Hi people,

I have been trying (2 days) to find a way to edit the content of a div containing text and an image.  I tried google for javascript methods without any success.  Searched also for a jquery method but not getting anywhere.

Apologies for being such a dummy over this,  maybe it is just outside my ability or maybe I'm too thick.

The objective is to add centering to am image which is in a div.

An example might help me explain.

What I have is this :-
<div id="details" contenteditable="true">
<p>some text</p>
<p>some text</p>
<p><img src="picture.jpg" width="250" height="166"></p>
<p>some text</p>
<p>some text</p>
</div>


This is what I would like :-


Select the image and click a button to produce this

<div id="details" contenteditable="true">
<p>some text</p>
<p>some text</p>
<p align="center"><img src="picture.jpg" width="250" height="166"></p>
<p>some text</p>
<p>some text</p>
</div>


Please is there anyone who could offer a method of doing this?

Perhaps jquery is not the best way to go,  if that is the case a pointer would be appreciated.

Thanks for reading  (hope I haven't over simplified it).