diff --git a/lib/editor/atto/plugins/image/styles.css b/lib/editor/atto/plugins/image/styles.css
new file mode 100644
index 00000000000..95310111f30
--- /dev/null
+++ b/lib/editor/atto/plugins/image/styles.css
@@ -0,0 +1,4 @@
+.atto_image_preview {
+    max-width: 150px;
+    max-height: 150px;
+}
diff --git a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js
index 1b319caf399..011f06aa6b5 100644
--- a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js
+++ b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js
@@ -133,7 +133,7 @@ var COMPONENTNAME = 'atto_image',
                 '<label class="sameline" for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
                 '<select class="{{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
                     '{{#each alignments}}' +
-                        '<option value="{{value}}">{{get_string str ../component}}</option>' +
+                        '<option value="{{value}}:{{name}};">{{get_string str ../component}}</option>' +
                     '{{/each}}' +
                 '</select>' +
                 '<br/>' +
@@ -141,7 +141,7 @@ var COMPONENTNAME = 'atto_image',
                 // Add the image preview.
                 '<label for="{{elementid}}_{{CSS.IMAGEPREVIEW}}">{{get_string "preview" component}}</label>' +
                 '<div class="mdl-align">' +
-                '<img src="#" width="200" class="{{CSS.IMAGEPREVIEW}}" id="{{elementid}}_{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/>' +
+                '<img src="#" class="{{CSS.IMAGEPREVIEW}}" id="{{elementid}}_{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/>' +
                 '<br/>' +
 
                 // Add the submit button and close the form.
@@ -210,6 +210,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
 
         var dialogue = this.getDialogue({
             headerContent: M.util.get_string('createimage', COMPONENTNAME),
+            width: '480px',
             focusAfterHide: true
         });
 
@@ -296,7 +297,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         }
 
         if (properties.align) {
-            properties.align.apply(img);
+            form.one('.' + CSS.INPUTALIGNMENT).set('value', properties.align);
         }
         if (properties.display) {
             img.setStyle('display', properties.display);
@@ -341,7 +342,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
 
             // Get the current selection.
             images = this.get('host').getSelectedNodes(),
-            i, width, height, style;
+            i, width, height, style, css;
 
         if (images) {
             images = images.filter('img');
@@ -362,8 +363,9 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
                 properties.height = height;
             }
             for (i in ALIGNMENTS) {
-                if (ALIGNMENTS[i].name === style) {
-                    properties.align = ALIGNMENTS[i];
+                css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
+                if (style.replace(' ', '').indexOf(css) !== -1) {
+                    properties.align = css;
                     break;
                 }
             }
@@ -406,6 +408,9 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
                 input = self._form.one('.' + CSS.IMAGEPREVIEW);
                 input.set('src', this.src);
                 input.setStyle('display', 'inline');
+
+                // Centre the dialogue once the preview image has loaded.
+                self.getDialogue().centerDialogue();
             };
             image.src = input.get('value');
         }
diff --git a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js
index 56856e1bb04..3aadb251979 100644
--- a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js
+++ b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js
@@ -1,2 +1,2 @@
-YUI.add("moodle-atto_image-button",function(e,t){var n={INPUTALIGNMENT:"atto_image_alignment",INPUTALT:"atto_image_altentry",INPUTHEIGHT:"atto_image_heightentry",INPUTSUBMIT:"atto_image_urlentrysubmit",INPUTURL:"atto_image_urlentry",INPUTWIDTH:"atto_image_widthentry",IMAGEALTWARNING:"atto_image_altwarning",IMAGEBROWSER:"openimagebrowser",IMAGEPRESENTATION:"atto_image_presentation",IMAGEPREVIEW:"atto_image_preview"},r=[{name:"baseline",str:"alignment_baseline",value:"vertical-align"},{name:"sub",str:"alignment_sub",value:"vertical-align"},{name:"super",str:"alignment_super",value:"vertical-align"},{name:"top",str:"alignment_top",value:"vertical-align"},{name:"text-top",str:"alignment_texttop",value:"vertical-align"},{name:"middle",str:"alignment_middle",value:"vertical-align"},{name:"bottom",str:"alignment_bottom",value:"vertical-align"},{name:"text-bottom",str:"alignment_textbottom",value:"vertical-align"},{name:"left",str:"alignment_left",value:"float"},{name:"right",str:"alignment_right",value:"float"}],i="atto_image",s='<form class="atto_form"><label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label><input class="fullwidth {{CSS.INPUTURL}}" type="url" id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/><br/>{{#if showFilepicker}}<button class="{{CSS.IMAGEBROWSER}}" type="button">{{get_string "browserepositories" component}}</button>{{/if}}<div style="display:none" role="alert" class="warning {{CSS.IMAGEALTWARNING}}">{{get_string "presentationoraltrequired" component}}</div><label for="{{elementid}}_{{CSS.INPUTALT}}">{{get_string "enteralt" component}}</label><input class="fullwidth {{CSS.INPUTALT}}" type="text" value="" id="{{elementid}}_{{CSS.INPUTALT}}" size="32"/><br/><input type="checkbox" class="{{CSS.IMAGEPRESENTATION}}" id="{{elementid}}_{{CSS.IMAGEPRESENTATION}}"/><label class="sameline" for="{{elementid}}_{{CSS.IMAGEPRESENTATION}}">{{get_string "presentation" component}}</label><br/><label class="sameline" for="{{elementid}}_{{CSS.INPUTWIDTH}}">{{get_string "width" component}}</label><input type="text" class="{{CSS.INPUTWIDTH}} id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="10"/><br/><label class="sameline" for="{{elementid}}_{{CSS.INPUTHEIGHT}}">{{get_string "height" component}}</label><input type="text" class="{{CSS.INPUTHEIGHT}}" id="{{elementid}}_{{CSS.INPUTHEIGHT}}" size="10"/><br/><label class="sameline" for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label><select class="{{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{#each alignments}}<option value="{{value}}">{{get_string str ../component}}</option>{{/each}}</select><br/><label for="{{elementid}}_{{CSS.IMAGEPREVIEW}}">{{get_string "preview" component}}</label><div class="mdl-align"><img src="#" width="200" class="{{CSS.IMAGEPREVIEW}}" id="{{elementid}}_{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/><br/><button class="{{CSS.INPUTSUBMIT}}" type="submit">{{get_string "createimage" component}}</button></div></form>',o='<img src="{{url}}" alt="{{alt}}" {{#if width}}width="{{width}}" {{/if}}{{#if height}}height="{{height}}" {{/if}}{{#if presentation}}role="presentation" {{/if}}{{#if alignment}}style="{{alignment}}" {{/if}}/>';e.namespace("M.atto_image").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_selectedImage:null,_form:null,initializer:function(){this.addButton({icon:"e/insert_edit_image",callback:this._displayDialogue,tags:"img",tagMatchRequiresAll:!1})},_displayDialogue:function(){this._currentSelection=this.get("host").getSelection();if(this._currentSelection===!1)return;var e=this.getDialogue({headerContent:M.util.get_string("createimage",i),focusAfterHide:!0});e.set("bodyContent",this._getDialogueContent()).show()},_getDialogueContent:function(){var t=e.Handlebars.compile(s),o=e.Node.create(t({elementid:this.get("host").get("elementid"),CSS:n,component:i,showFilepicker:this.get("host").canShowFilepicker("image"),alignments:r}));return this._form=o,this._applyImageProperties(this._form),this._form.one("."+n.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+n.INPUTSUBMIT).on("click",this._setImage,this),this._form.one("."+n.IMAGEBROWSER).on("click",function(){this.get("host").showFilepicker("image",this._filepickerCallback,this)},this),o},_filepickerCallback:function(e){if(e.url!==""){var t=this._form.one("."+n.INPUTURL),r=this;t.set("value",e.url);var i=new Image;i.onload=function(){r._form.one("."+n.INPUTWIDTH).set("value",this.width),r._form.one("."+n.INPUTHEIGHT).set("value",this.height),r._form.one("."+n.IMAGEPREVIEW).set("src",this.src),r._form.one("."+n.IMAGEPREVIEW).setStyle("display","inline"),r.getDialogue().centerDialogue()},i.src=e.url}},_applyImageProperties:function(e){var t=this._getSelectedImageProperties(),r=e.one("."+n.IMAGEPREVIEW);if(t===!1){r.setStyle("display","none");return}t.align&&t.align.apply(r),t.display&&r.setStyle("display",t.display),t.width&&e.one("."+n.INPUTWIDTH).set("value",t.width),t.height&&e.one("."+n.INPUTHEIGHT).set("value",t.height),t.alt&&e.one("."+n.INPUTALT).set("value",t.alt),t.src&&(e.one("."+n.INPUTURL).set("value",t.src),r.setAttribute("src",t.src)),t.presentation&&e.one("."+n.IMAGEPRESENTATION).set("checked","checked")},_getSelectedImageProperties:function(){var e={src:null,alt:null,width:null,height:null,align:null,display:"inline",presentation:!1},t=this.get("host").getSelectedNodes(),n,i,s,o;t&&(t=t.filter("img"));if(t&&t.size()){image=t.item(0),this._selectedImage=image,o=image.getAttribute("style"),i=parseInt(image.getAttribute("width"),10),s=parseInt(image.getAttribute("height"),10),i>0&&(e.width=i),s>0&&(e.height=s);for(n in r)if(r[n].name===o){e.align=r[n];break}return e.src=image.getAttribute("src"),e.alt=image.getAttribute("alt")||"",e.presentation=image.get("role")==="presentation",e}return this._selectedImage=null,!1},_urlChanged:function(){var e=this._form.one("."+n.INPUTURL),t=this;if(e.get("value")!==""){var r=new Image;r
-.onload=function(){var e;e=t._form.one("."+n.INPUTWIDTH),e.get("value")===""&&e.set("value",this.width),e=t._form.one("."+n.INPUTHEIGHT),e.get("value")===""&&e.set("value",this.height),e=t._form.one("."+n.IMAGEPREVIEW),e.set("src",this.src),e.setStyle("display","inline")},r.src=e.get("value")}},_setImage:function(t){var r=this._form,i=r.one("."+n.INPUTURL).get("value"),s=r.one("."+n.INPUTALT).get("value"),u=r.one("."+n.INPUTWIDTH).get("value"),a=r.one("."+n.INPUTHEIGHT).get("value"),f=r.one("."+n.INPUTALIGNMENT).get("value"),l=r.one("."+n.IMAGEPRESENTATION).get("checked"),c,h=this.get("host");t.preventDefault();if(s===""&&!l){r.one("."+n.IMAGEALTWARNING).setStyle("display","block"),r.one("."+n.INPUTALT).setAttribute("aria-invalid",!0),r.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!0);return}r.one("."+n.IMAGEALTWARNING).setStyle("display","none"),r.one("."+n.INPUTALT).setAttribute("aria-invalid",!1),r.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!1),this.getDialogue({focusAfterHide:null}).hide(),h.focus(),i!==""&&(this._selectedImage?h.setSelection(h.getSelectionFromNode(this._selectedImage)):h.setSelection(this._currentSelection),template=e.Handlebars.compile(o),c=template({url:i,alt:s,width:u,height:a,presentation:l,alignment:f}),this.get("host").insertContentAtFocusPoint(c),this.markUpdated())}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});
+YUI.add("moodle-atto_image-button",function(e,t){var n={INPUTALIGNMENT:"atto_image_alignment",INPUTALT:"atto_image_altentry",INPUTHEIGHT:"atto_image_heightentry",INPUTSUBMIT:"atto_image_urlentrysubmit",INPUTURL:"atto_image_urlentry",INPUTWIDTH:"atto_image_widthentry",IMAGEALTWARNING:"atto_image_altwarning",IMAGEBROWSER:"openimagebrowser",IMAGEPRESENTATION:"atto_image_presentation",IMAGEPREVIEW:"atto_image_preview"},r=[{name:"baseline",str:"alignment_baseline",value:"vertical-align"},{name:"sub",str:"alignment_sub",value:"vertical-align"},{name:"super",str:"alignment_super",value:"vertical-align"},{name:"top",str:"alignment_top",value:"vertical-align"},{name:"text-top",str:"alignment_texttop",value:"vertical-align"},{name:"middle",str:"alignment_middle",value:"vertical-align"},{name:"bottom",str:"alignment_bottom",value:"vertical-align"},{name:"text-bottom",str:"alignment_textbottom",value:"vertical-align"},{name:"left",str:"alignment_left",value:"float"},{name:"right",str:"alignment_right",value:"float"}],i="atto_image",s='<form class="atto_form"><label for="{{elementid}}_{{CSS.INPUTURL}}">{{get_string "enterurl" component}}</label><input class="fullwidth {{CSS.INPUTURL}}" type="url" id="{{elementid}}_{{CSS.INPUTURL}}" size="32"/><br/>{{#if showFilepicker}}<button class="{{CSS.IMAGEBROWSER}}" type="button">{{get_string "browserepositories" component}}</button>{{/if}}<div style="display:none" role="alert" class="warning {{CSS.IMAGEALTWARNING}}">{{get_string "presentationoraltrequired" component}}</div><label for="{{elementid}}_{{CSS.INPUTALT}}">{{get_string "enteralt" component}}</label><input class="fullwidth {{CSS.INPUTALT}}" type="text" value="" id="{{elementid}}_{{CSS.INPUTALT}}" size="32"/><br/><input type="checkbox" class="{{CSS.IMAGEPRESENTATION}}" id="{{elementid}}_{{CSS.IMAGEPRESENTATION}}"/><label class="sameline" for="{{elementid}}_{{CSS.IMAGEPRESENTATION}}">{{get_string "presentation" component}}</label><br/><label class="sameline" for="{{elementid}}_{{CSS.INPUTWIDTH}}">{{get_string "width" component}}</label><input type="text" class="{{CSS.INPUTWIDTH}} id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="10"/><br/><label class="sameline" for="{{elementid}}_{{CSS.INPUTHEIGHT}}">{{get_string "height" component}}</label><input type="text" class="{{CSS.INPUTHEIGHT}}" id="{{elementid}}_{{CSS.INPUTHEIGHT}}" size="10"/><br/><label class="sameline" for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label><select class="{{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{#each alignments}}<option value="{{value}}:{{name}};">{{get_string str ../component}}</option>{{/each}}</select><br/><label for="{{elementid}}_{{CSS.IMAGEPREVIEW}}">{{get_string "preview" component}}</label><div class="mdl-align"><img src="#" class="{{CSS.IMAGEPREVIEW}}" id="{{elementid}}_{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/><br/><button class="{{CSS.INPUTSUBMIT}}" type="submit">{{get_string "createimage" component}}</button></div></form>',o='<img src="{{url}}" alt="{{alt}}" {{#if width}}width="{{width}}" {{/if}}{{#if height}}height="{{height}}" {{/if}}{{#if presentation}}role="presentation" {{/if}}{{#if alignment}}style="{{alignment}}" {{/if}}/>';e.namespace("M.atto_image").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_selectedImage:null,_form:null,initializer:function(){this.addButton({icon:"e/insert_edit_image",callback:this._displayDialogue,tags:"img",tagMatchRequiresAll:!1})},_displayDialogue:function(){this._currentSelection=this.get("host").getSelection();if(this._currentSelection===!1)return;var e=this.getDialogue({headerContent:M.util.get_string("createimage",i),width:"480px",focusAfterHide:!0});e.set("bodyContent",this._getDialogueContent()).show()},_getDialogueContent:function(){var t=e.Handlebars.compile(s),o=e.Node.create(t({elementid:this.get("host").get("elementid"),CSS:n,component:i,showFilepicker:this.get("host").canShowFilepicker("image"),alignments:r}));return this._form=o,this._applyImageProperties(this._form),this._form.one("."+n.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+n.INPUTSUBMIT).on("click",this._setImage,this),this._form.one("."+n.IMAGEBROWSER).on("click",function(){this.get("host").showFilepicker("image",this._filepickerCallback,this)},this),o},_filepickerCallback:function(e){if(e.url!==""){var t=this._form.one("."+n.INPUTURL),r=this;t.set("value",e.url);var i=new Image;i.onload=function(){r._form.one("."+n.INPUTWIDTH).set("value",this.width),r._form.one("."+n.INPUTHEIGHT).set("value",this.height),r._form.one("."+n.IMAGEPREVIEW).set("src",this.src),r._form.one("."+n.IMAGEPREVIEW).setStyle("display","inline"),r.getDialogue().centerDialogue()},i.src=e.url}},_applyImageProperties:function(e){var t=this._getSelectedImageProperties(),r=e.one("."+n.IMAGEPREVIEW);if(t===!1){r.setStyle("display","none");return}t.align&&e.one("."+n.INPUTALIGNMENT).set("value",t.align),t.display&&r.setStyle("display",t.display),t.width&&e.one("."+n.INPUTWIDTH).set("value",t.width),t.height&&e.one("."+n.INPUTHEIGHT).set("value",t.height),t.alt&&e.one("."+n.INPUTALT).set("value",t.alt),t.src&&(e.one("."+n.INPUTURL).set("value",t.src),r.setAttribute("src",t.src)),t.presentation&&e.one("."+n.IMAGEPRESENTATION).set("checked","checked")},_getSelectedImageProperties:function(){var e={src:null,alt:null,width:null,height:null,align:null,display:"inline",presentation:!1},t=this.get("host").getSelectedNodes(),n,i,s,o,u;t&&(t=t.filter("img"));if(t&&t.size()){image=t.item(0),this._selectedImage=image,o=image.getAttribute("style"),i=parseInt(image.getAttribute("width"),10),s=parseInt(image.getAttribute("height"),10),i>0&&(e.width=i),s>0&&(e.height=s);for(n in r){u=r[n].value+":"+r[n].name+";";if(o.replace(" ","").indexOf(u)!==-1){e.align=u;break}}return e.src=image.getAttribute("src"),e.alt=image.getAttribute("alt")||"",e.presentation=image.get("role")==="presentation",e}return this._selectedImage=null,!1},_urlChanged:
+function(){var e=this._form.one("."+n.INPUTURL),t=this;if(e.get("value")!==""){var r=new Image;r.onload=function(){var e;e=t._form.one("."+n.INPUTWIDTH),e.get("value")===""&&e.set("value",this.width),e=t._form.one("."+n.INPUTHEIGHT),e.get("value")===""&&e.set("value",this.height),e=t._form.one("."+n.IMAGEPREVIEW),e.set("src",this.src),e.setStyle("display","inline"),t.getDialogue().centerDialogue()},r.src=e.get("value")}},_setImage:function(t){var r=this._form,i=r.one("."+n.INPUTURL).get("value"),s=r.one("."+n.INPUTALT).get("value"),u=r.one("."+n.INPUTWIDTH).get("value"),a=r.one("."+n.INPUTHEIGHT).get("value"),f=r.one("."+n.INPUTALIGNMENT).get("value"),l=r.one("."+n.IMAGEPRESENTATION).get("checked"),c,h=this.get("host");t.preventDefault();if(s===""&&!l){r.one("."+n.IMAGEALTWARNING).setStyle("display","block"),r.one("."+n.INPUTALT).setAttribute("aria-invalid",!0),r.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!0);return}r.one("."+n.IMAGEALTWARNING).setStyle("display","none"),r.one("."+n.INPUTALT).setAttribute("aria-invalid",!1),r.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!1),this.getDialogue({focusAfterHide:null}).hide(),h.focus(),i!==""&&(this._selectedImage?h.setSelection(h.getSelectionFromNode(this._selectedImage)):h.setSelection(this._currentSelection),template=e.Handlebars.compile(o),c=template({url:i,alt:s,width:u,height:a,presentation:l,alignment:f}),this.get("host").insertContentAtFocusPoint(c),this.markUpdated())}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});
diff --git a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js
index 1b319caf399..011f06aa6b5 100644
--- a/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js
+++ b/lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js
@@ -133,7 +133,7 @@ var COMPONENTNAME = 'atto_image',
                 '<label class="sameline" for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
                 '<select class="{{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
                     '{{#each alignments}}' +
-                        '<option value="{{value}}">{{get_string str ../component}}</option>' +
+                        '<option value="{{value}}:{{name}};">{{get_string str ../component}}</option>' +
                     '{{/each}}' +
                 '</select>' +
                 '<br/>' +
@@ -141,7 +141,7 @@ var COMPONENTNAME = 'atto_image',
                 // Add the image preview.
                 '<label for="{{elementid}}_{{CSS.IMAGEPREVIEW}}">{{get_string "preview" component}}</label>' +
                 '<div class="mdl-align">' +
-                '<img src="#" width="200" class="{{CSS.IMAGEPREVIEW}}" id="{{elementid}}_{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/>' +
+                '<img src="#" class="{{CSS.IMAGEPREVIEW}}" id="{{elementid}}_{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/>' +
                 '<br/>' +
 
                 // Add the submit button and close the form.
@@ -210,6 +210,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
 
         var dialogue = this.getDialogue({
             headerContent: M.util.get_string('createimage', COMPONENTNAME),
+            width: '480px',
             focusAfterHide: true
         });
 
@@ -296,7 +297,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         }
 
         if (properties.align) {
-            properties.align.apply(img);
+            form.one('.' + CSS.INPUTALIGNMENT).set('value', properties.align);
         }
         if (properties.display) {
             img.setStyle('display', properties.display);
@@ -341,7 +342,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
 
             // Get the current selection.
             images = this.get('host').getSelectedNodes(),
-            i, width, height, style;
+            i, width, height, style, css;
 
         if (images) {
             images = images.filter('img');
@@ -362,8 +363,9 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
                 properties.height = height;
             }
             for (i in ALIGNMENTS) {
-                if (ALIGNMENTS[i].name === style) {
-                    properties.align = ALIGNMENTS[i];
+                css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
+                if (style.replace(' ', '').indexOf(css) !== -1) {
+                    properties.align = css;
                     break;
                 }
             }
@@ -406,6 +408,9 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
                 input = self._form.one('.' + CSS.IMAGEPREVIEW);
                 input.set('src', this.src);
                 input.setStyle('display', 'inline');
+
+                // Centre the dialogue once the preview image has loaded.
+                self.getDialogue().centerDialogue();
             };
             image.src = input.get('value');
         }
diff --git a/lib/editor/atto/plugins/image/yui/src/button/js/button.js b/lib/editor/atto/plugins/image/yui/src/button/js/button.js
index f2bd4ad03c1..131ffc57ffa 100644
--- a/lib/editor/atto/plugins/image/yui/src/button/js/button.js
+++ b/lib/editor/atto/plugins/image/yui/src/button/js/button.js
@@ -131,7 +131,7 @@ var COMPONENTNAME = 'atto_image',
                 '<label class="sameline" for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
                 '<select class="{{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
                     '{{#each alignments}}' +
-                        '<option value="{{value}}">{{get_string str ../component}}</option>' +
+                        '<option value="{{value}}:{{name}};">{{get_string str ../component}}</option>' +
                     '{{/each}}' +
                 '</select>' +
                 '<br/>' +
@@ -139,7 +139,7 @@ var COMPONENTNAME = 'atto_image',
                 // Add the image preview.
                 '<label for="{{elementid}}_{{CSS.IMAGEPREVIEW}}">{{get_string "preview" component}}</label>' +
                 '<div class="mdl-align">' +
-                '<img src="#" width="200" class="{{CSS.IMAGEPREVIEW}}" id="{{elementid}}_{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/>' +
+                '<img src="#" class="{{CSS.IMAGEPREVIEW}}" id="{{elementid}}_{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/>' +
                 '<br/>' +
 
                 // Add the submit button and close the form.
@@ -208,6 +208,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
 
         var dialogue = this.getDialogue({
             headerContent: M.util.get_string('createimage', COMPONENTNAME),
+            width: '480px',
             focusAfterHide: true
         });
 
@@ -294,7 +295,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         }
 
         if (properties.align) {
-            properties.align.apply(img);
+            form.one('.' + CSS.INPUTALIGNMENT).set('value', properties.align);
         }
         if (properties.display) {
             img.setStyle('display', properties.display);
@@ -339,7 +340,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
 
             // Get the current selection.
             images = this.get('host').getSelectedNodes(),
-            i, width, height, style;
+            i, width, height, style, css;
 
         if (images) {
             images = images.filter('img');
@@ -360,8 +361,9 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
                 properties.height = height;
             }
             for (i in ALIGNMENTS) {
-                if (ALIGNMENTS[i].name === style) {
-                    properties.align = ALIGNMENTS[i];
+                css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
+                if (style.replace(' ', '').indexOf(css) !== -1) {
+                    properties.align = css;
                     break;
                 }
             }
@@ -404,6 +406,9 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
                 input = self._form.one('.' + CSS.IMAGEPREVIEW);
                 input.set('src', this.src);
                 input.setStyle('display', 'inline');
+
+                // Centre the dialogue once the preview image has loaded.
+                self.getDialogue().centerDialogue();
             };
             image.src = input.get('value');
         }