diff --git a/lib/editor/atto/plugins/image/styles.css b/lib/editor/atto/plugins/image/styles.css
index 95a6b9769fd..4d455831966 100644
--- a/lib/editor/atto/plugins/image/styles.css
+++ b/lib/editor/atto/plugins/image/styles.css
@@ -27,3 +27,36 @@
 .atto_image_size label {
     display: inline-block;
 }
+
+.atto_image_button_text-top {
+    vertical-align: text-top;
+    margin: 0 0.5em;
+}
+
+.atto_image_button_middle {
+    vertical-align: middle;
+    margin: 0 0.5em;
+}
+
+.atto_image_button_text-bottom {
+    vertical-align: text-bottom;
+    margin: 0 0.5em;
+}
+
+.atto_image_button_text-top.img-responsive,
+.atto_image_button_middle.img-responsive,
+.atto_image_button_text-bottom.img-responsive {
+    max-width: calc(100% - 1em);
+}
+
+.atto_image_button_left {
+    float: left;
+    margin: 0 0.5em 0 0;
+    max-width: calc(100% - 1em);
+}
+
+.atto_image_button_right {
+    float: right;
+    margin: 0 0 0 0.5em;
+    max-width: calc(100% - 1em);
+}
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 c0493175056..89ce285e708 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
@@ -48,7 +48,8 @@ var CSS = {
         INPUTCONSTRAIN: 'atto_image_constrain',
         INPUTCUSTOMSTYLE: 'atto_image_customstyle',
         IMAGEPREVIEW: 'atto_image_preview',
-        IMAGEPREVIEWBOX: 'atto_image_preview_box'
+        IMAGEPREVIEWBOX: 'atto_image_preview_box',
+        ALIGNSETTINGS: 'atto_image_button'
     },
     SELECTORS = {
         INPUTURL: '.' + CSS.INPUTURL
@@ -56,38 +57,34 @@ var CSS = {
     ALIGNMENTS = [
         // Vertical alignment.
         {
-            name: 'text-top',
+            name: 'verticalAlign',
             str: 'alignment_top',
-            value: 'vertical-align',
-            margin: '0 .5em'
+            value: 'text-top',
+            margin: '0 0.5em'
         }, {
-            name: 'middle',
+            name: 'verticalAlign',
             str: 'alignment_middle',
-            value: 'vertical-align',
-            margin: '0 .5em'
+            value: 'middle',
+            margin: '0 0.5em'
         }, {
-            name: 'text-bottom',
+            name: 'verticalAlign',
             str: 'alignment_bottom',
-            value: 'vertical-align',
-            margin: '0 .5em',
+            value: 'text-bottom',
+            margin: '0 0.5em',
             isDefault: true
         },
 
         // Floats.
         {
-            name: 'left',
+            name: 'float',
             str: 'alignment_left',
-            value: 'float',
-            margin: '0 .5em 0 0'
+            value: 'left',
+            margin: '0 0.5em 0 0'
         }, {
-            name: 'right',
+            name: 'float',
             str: 'alignment_right',
-            value: 'float',
-            margin: '0 0 0 .5em'
-        }, {
-            name: 'customstyle',
-            str: 'customstyle',
-            value: 'style'
+            value: 'right',
+            margin: '0 0 0 0.5em'
         }
     ],
 
@@ -142,7 +139,7 @@ var CSS = {
                 '<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>' +
+                        '<option value="{{value}}">{{get_string str ../component}}</option>' +
                     '{{/each}}' +
                 '</select>' +
                 // Hidden input to store custom styles.
@@ -165,7 +162,7 @@ var CSS = {
                 '{{#if width}}width="{{width}}" {{/if}}' +
                 '{{#if height}}height="{{height}}" {{/if}}' +
                 '{{#if presentation}}role="presentation" {{/if}}' +
-                'style="{{alignment}}{{margin}}{{customstyle}}"' +
+                '{{#if customstyle}}style="{{customstyle}}" {{/if}}' +
                 '{{#if classlist}}class="{{classlist}}" {{/if}}' +
                 '{{#if id}}id="{{id}}" {{/if}}' +
                 '/>';
@@ -230,6 +227,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
      *
      * @method _handleDragDrop
      * @param {EventFacade} e
+     * @return mixed
      * @private
      */
     _handleDragDrop: function(e) {
@@ -642,30 +640,25 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
      */
     _applyImageProperties: function(form) {
         var properties = this._getSelectedImageProperties(),
-            img = form.one('.' + CSS.IMAGEPREVIEW),
-            i,
-            css;
+            img = form.one('.' + CSS.IMAGEPREVIEW);
 
         if (properties === false) {
             img.setStyle('display', 'none');
             // Set the default alignment.
-            for (i in ALIGNMENTS) {
-                if (ALIGNMENTS[i].isDefault === true) {
-                    css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
-                    form.one('.' + CSS.INPUTALIGNMENT).set('value', css);
+            ALIGNMENTS.some(function(alignment) {
+                if (alignment.isDefault) {
+                    form.one('.' + CSS.INPUTALIGNMENT).set('value', alignment.value);
+                    return true;
                 }
-            }
-            // Remove the custom style option if this is a new image.
-            form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1);
+
+                return false;
+            }, this);
+
             return;
         }
 
         if (properties.align) {
             form.one('.' + CSS.INPUTALIGNMENT).set('value', properties.align);
-            // Remove the custom style option if we have a standard alignment.
-            form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1);
-        } else {
-            form.one('.' + CSS.INPUTALIGNMENT).set('value', 'style:customstyle;');
         }
         if (properties.customstyle) {
             form.one('.' + CSS.INPUTCUSTOMSTYLE).set('value', properties.customstyle);
@@ -712,25 +705,21 @@ 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,
-            css,
-            image,
-            margin;
+            image;
 
         if (images) {
             images = images.filter('img');
         }
 
         if (images && images.size()) {
-            image = images.item(0);
+            image = this._removeLegacyAlignment(images.item(0));
             this._selectedImage = image;
 
             style = image.getAttribute('style');
             properties.customstyle = style;
-            style = style.replace(/ /g, '');
 
             width = image.getAttribute('width');
             if (!width.match(REGEX.ISPERCENT)) {
@@ -747,18 +736,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             if (height !== 0) {
                 properties.height = height;
             }
-            for (i in ALIGNMENTS) {
-                css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
-                if (style.indexOf(css) !== -1) {
-                    margin = 'margin:' + ALIGNMENTS[i].margin + ';';
-                    margin = margin.replace(/ /g, '');
-                    // Must match alignment and margins - otherwise custom style is selected.
-                    if (style.indexOf(margin) !== -1) {
-                        properties.align = css;
-                        break;
-                    }
-                }
-            }
+            this._getAlignmentPropeties(image, properties);
             properties.src = image.getAttribute('src');
             properties.alt = image.getAttribute('alt') || '';
             properties.presentation = (image.get('role') === 'presentation');
@@ -770,6 +748,40 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         return false;
     },
 
+    /**
+     * Sets the alignment of a properties object.
+     *
+     * @method _getAlignmentPropeties
+     * @param {Node} image The image that the alignment properties should be found for
+     * @param {Object} properties The properties object that is created in _getSelectedImageProperties()
+     * @private
+     */
+    _getAlignmentPropeties: function(image, properties) {
+        var complete = false,
+            defaultAlignment;
+
+        // Check for an alignment value.
+        complete = ALIGNMENTS.some(function(alignment) {
+            var classname = this._getAlignmentClass(alignment.value);
+            if (image.hasClass(classname)) {
+                properties.align = alignment.value;
+                Y.log('Found alignment ' + alignment.value, 'debug', 'atto_image-button');
+
+                return true;
+            }
+
+            if (alignment.isDefault) {
+                defaultAlignment = alignment.value;
+            }
+
+            return false;
+        }, this);
+
+        if (!complete && defaultAlignment) {
+            properties.align = defaultAlignment;
+        }
+    },
+
     /**
      * Update the form when the URL was changed. This includes updating the
      * height, width, and image preview.
@@ -799,14 +811,11 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             alt = form.one('.' + CSS.INPUTALT).get('value'),
             width = form.one('.' + CSS.INPUTWIDTH).get('value'),
             height = form.one('.' + CSS.INPUTHEIGHT).get('value'),
-            alignment = form.one('.' + CSS.INPUTALIGNMENT).get('value'),
-            margin = '',
+            alignment = this._getAlignmentClass(form.one('.' + CSS.INPUTALIGNMENT).get('value')),
             presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked'),
             constrain = form.one('.' + CSS.INPUTCONSTRAIN).get('checked'),
             imagehtml,
-            customstyle = '',
-            i,
-            css,
+            customstyle = form.one('.' + CSS.INPUTCUSTOMSTYLE).get('value'),
             classlist = [],
             host = this.get('host');
 
@@ -826,22 +835,13 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
                 host.setSelection(this._currentSelection);
             }
 
-            if (alignment === 'style:customstyle;') {
-                alignment = '';
-                customstyle = form.one('.' + CSS.INPUTCUSTOMSTYLE).get('value');
-            } else {
-                for (i in ALIGNMENTS) {
-                    css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
-                    if (alignment === css) {
-                        margin = ' margin: ' + ALIGNMENTS[i].margin + ';';
-                    }
-                }
-            }
-
             if (constrain) {
                 classlist.push(CSS.RESPONSIVE);
             }
 
+            // Add the alignment class for the image.
+            classlist.push(alignment);
+
             if (!width.match(REGEX.ISPERCENT) && isNaN(parseInt(width, 10))) {
                 form.one('.' + CSS.INPUTWIDTH).focus();
                 return;
@@ -858,8 +858,6 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
                 width: width,
                 height: height,
                 presentation: presentation,
-                alignment: alignment,
-                margin: margin,
                 customstyle: customstyle,
                 classlist: classlist.join(' ')
             });
@@ -875,6 +873,48 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
 
     },
 
+    /**
+     * Removes any legacy styles added by previous versions of the atto image button.
+     *
+     * @method _removeLegacyAlignment
+     * @param {Y.Node} imageNode
+     * @return {Y.Node}
+     * @private
+     */
+    _removeLegacyAlignment: function(imageNode) {
+        if (!imageNode.getStyle('margin')) {
+            // There is no margin therefore this cannot match any known alignments.
+            return imageNode;
+        }
+
+        ALIGNMENTS.some(function(alignment) {
+            if (imageNode.getStyle(alignment.name) !== alignment.value) {
+                // The name/value do not match. Skip.
+                return false;
+            }
+
+            var normalisedNode = Y.Node.create('<div>');
+            normalisedNode.setStyle('margin', alignment.margin);
+            if (imageNode.getStyle('margin') !== normalisedNode.getStyle('margin')) {
+                // The margin does not match.
+                return false;
+            }
+
+            Y.log('Legacy alignment found and removed.', 'info', 'atto_image-button');
+            imageNode.addClass(this._getAlignmentClass(alignment.value));
+            imageNode.setStyle(alignment.name, null);
+            imageNode.setStyle('margin', null);
+
+            return true;
+        }, this);
+
+        return imageNode;
+    },
+
+    _getAlignmentClass: function(alignment) {
+        return CSS.ALIGNSETTINGS + '_' + alignment;
+    },
+
     /**
      * Update the alt text warning live.
      *
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 a973de75067..78edf53af19 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,3 +1,3 @@
-YUI.add("moodle-atto_image-button",function(e,t){var n={RESPONSIVE:"img-responsive",INPUTALIGNMENT:"atto_image_alignment",INPUTALT:"atto_image_altentry",INPUTHEIGHT:"atto_image_heightentry",INPUTSUBMIT:"atto_image_urlentrysubmit",INPUTURL:"atto_image_urlentry",INPUTSIZE:"atto_image_size",INPUTWIDTH:"atto_image_widthentry",IMAGEALTWARNING:"atto_image_altwarning",IMAGEBROWSER:"openimagebrowser",IMAGEPRESENTATION:"atto_image_presentation",INPUTCONSTRAIN:"atto_image_constrain",INPUTCUSTOMSTYLE:"atto_image_customstyle",IMAGEPREVIEW:"atto_image_preview",IMAGEPREVIEWBOX:"atto_image_preview_box"},r={INPUTURL:"."+n.INPUTURL},i=[{name:"text-top",str:"alignment_top",value:"vertical-align",margin:"0 .5em"},{name:"middle",str:"alignment_middle",value:"vertical-align",margin:"0 .5em"},{name:"text-bottom",str:"alignment_bottom",value:"vertical-align",margin:"0 .5em",isDefault:!0},{name:"left",str:"alignment_left",value:"float",margin:"0 .5em 0 0"},{name:"right",str:"alignment_right",value:"float",margin:"0 0 0 .5em"},{name:"customstyle",str:"customstyle",value:"style"}],s={ISPERCENT:/\d+%/},o="atto_image",u='<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.INPUTSIZE}}">{{get_string "size" component}}</label><div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="{{CSS.INPUTSIZE}}"><label class="accesshide" for="{{elementid}}_{{CSS.INPUTWIDTH}}">{{get_string "width" component}}</label><input type="text" class="{{CSS.INPUTWIDTH}} input-mini" id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="4"/> x <label class="accesshide" for="{{elementid}}_{{CSS.INPUTHEIGHT}}">{{get_string "height" component}}</label><input type="text" class="{{CSS.INPUTHEIGHT}} input-mini" id="{{elementid}}_{{CSS.INPUTHEIGHT}}" size="4"/><input type="checkbox" class="{{CSS.INPUTCONSTRAIN}} sameline" id="{{elementid}}_{{CSS.INPUTCONSTRAIN}}"/><label for="{{elementid}}_{{CSS.INPUTCONSTRAIN}}">{{get_string "constrain" component}}</label></div><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><input type="hidden" class="{{CSS.INPUTCUSTOMSTYLE}}"/><br/><div class="mdl-align"><div class="{{CSS.IMAGEPREVIEWBOX}}"><img src="#" class="{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/></div><button class="{{CSS.INPUTSUBMIT}}" type="submit">{{get_string "saveimage" component}}</button></div></form>',a='<img src="{{url}}" alt="{{alt}}" {{#if width}}width="{{width}}" {{/if}}{{#if height}}height="{{height}}" {{/if}}{{#if presentation}}role="presentation" {{/if}}style="{{alignment}}{{margin}}{{customstyle}}"{{#if classlist}}class="{{classlist}}" {{/if}}{{#if id}}id="{{id}}" {{/if}}/>';e.namespace("M.atto_image").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_selectedImage:null,_form:null,_rawImageDimensions:null,initializer:function(){this.addButton({icon:"e/insert_edit_image",callback:this._displayDialogue,tags:"img",tagMatchRequiresAll:!1}),this.editor.delegate("dblclick",this._displayDialogue,"img",this),this.editor.delegate("click",this._handleClick,"img",this),this.editor.on("drop",this._handleDragDrop,this),this.editor.on("dragover",function(e){e.preventDefault()},this),this.editor.on("dragenter",function(e){e.preventDefault()},this)},_handleDragDrop:function(t){var n=this,r=this.get("host"),i=e.Handlebars.compile(a);r.saveSelection(),t=t._event;var s=t.dataTransfer&&t.dataTransfer.files&&t.dataTransfer.files.length;if(s&&/^image\//.test(t.dataTransfer.files[0].type)){var u=r.get("filepickeroptions").image,f=u.savepath===undefined?"/":u.savepath,l=new FormData,c=0,h="",p=new XMLHttpRequest,d="",v=Object.keys(u.repositories);t.preventDefault(),t.stopPropagation(),l.append("repo_upload_file",t.dataTransfer.files[0]),l.append("itemid",u.itemid);for(var m=0;m<v.length;m++)if(u.repositories[v[m]].type==="upload"){l.append("repo_id",u.repositories[v[m]].id);break}return l.append("env",u.env),l.append("sesskey",M.cfg.sesskey),l.append("client_id",u.client_id),l.append("savepath",f),l.append("ctx_id",u.context.id),c=(new Date).getTime(),h="moodleimage_"+Math.round(Math.random()*1e5)+"-"+c,r.focus(),r.restoreSelection(),d=i({url:M.util.image_url("i/loading_small","moodle"),alt:M.util.get_string("uploading",o),id:h}),r.insertContentAtFocusPoint(d),n.markUpdated(),p.onreadystatechange=function(){var t=n.editor.one("#"+h),r,s,o,u;if(p.readyState===4)if(p.status===200){r=JSON.parse(p.responseText);if(r){if(r.error)return t&&t.remove(!0),new M.core.ajaxException(r);s=r,r.event&&r.event==="fileexists"&&(s=r.newfile),o=i({url:s.url,presentation:!0}),u=e.Node.create(o),t?t.replace(u):n.editor.appendChild(u),n.markUpdated()}}else e.use("moodle-core-notification-alert",function(){new M.core.alert({message:M.util.get_string("servererror","moodle")})}),t&&t.remove(!0)},p.open("POST",M.cfg.wwwroot+"/repository/repository_ajax.php?action=upload",!0),p.send(l),!1}},_handleClick:function(e){var t=
-e.target,n=this.get("host").getSelectionFromNode(t);this.get("host").getSelection()!==n&&this.get("host").setSelection(n)},_displayDialogue:function(){this._currentSelection=this.get("host").getSelection();if(this._currentSelection===!1)return;this._rawImageDimensions=null;var e=this.getDialogue({headerContent:M.util.get_string("imageproperties",o),width:"480px",focusAfterHide:!0,focusOnShowSelector:r.INPUTURL});e.set("bodyContent",this._getDialogueContent()).show()},_loadPreviewImage:function(e){var t=new Image,r=this;t.onerror=function(){var e=r._form.one("."+n.IMAGEPREVIEW);e.setStyles({display:"none"}),r.getDialogue().centerDialogue()},t.onload=function(){var e,t,i,o,u;r._rawImageDimensions={width:this.width,height:this.height},e=r._form.one("."+n.INPUTWIDTH),t=e.get("value"),t===""&&(e.set("value",this.width),t=""+this.width),e=r._form.one("."+n.INPUTHEIGHT),i=e.get("value"),i===""&&(e.set("value",this.height),i=""+this.height),e=r._form.one("."+n.IMAGEPREVIEW),e.setAttribute("src",this.src),e.setStyles({display:"inline"}),e=r._form.one("."+n.INPUTCONSTRAIN),t.match(s.ISPERCENT)&&i.match(s.ISPERCENT)?e.set("checked",t===i):(this.width===0&&(this.width=1),this.height===0&&(this.height=1),o=Math.round(1e3*parseInt(t,10)/this.width),u=Math.round(1e3*parseInt(i,10)/this.height),e.set("checked",o===u)),r._autoAdjustSize(r),r.getDialogue().centerDialogue()},t.src=e},_getDialogueContent:function(){var t=e.Handlebars.compile(u),r=this.get("host").canShowFilepicker("image"),s=e.Node.create(t({elementid:this.get("host").get("elementid"),CSS:n,component:o,showFilepicker:r,alignments:i}));return this._form=s,this._applyImageProperties(this._form),this._form.one("."+n.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+n.IMAGEPRESENTATION).on("change",this._updateWarning,this),this._form.one("."+n.INPUTALT).on("change",this._updateWarning,this),this._form.one("."+n.INPUTWIDTH).on("blur",this._autoAdjustSize,this),this._form.one("."+n.INPUTHEIGHT).on("blur",this._autoAdjustSize,this,!0),this._form.one("."+n.INPUTCONSTRAIN).on("change",function(e){e.target.get("checked")&&this._autoAdjustSize(e)},this),this._form.one("."+n.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+n.INPUTSUBMIT).on("click",this._setImage,this),r&&this._form.one("."+n.IMAGEBROWSER).on("click",function(){this.get("host").showFilepicker("image",this._filepickerCallback,this)},this),s},_autoAdjustSize:function(e,t){t=t||!1;var r=this._form.one("."+n.INPUTWIDTH),i="width",o=this._form.one("."+n.INPUTHEIGHT),u="height",a=this._form.one("."+n.INPUTCONSTRAIN),f=r.get("value"),l=o.get("value"),c=this._form.one("."+n.IMAGEPREVIEW),h,p;if(!this._rawImageDimensions)return;f===""&&(f=this._rawImageDimensions[i],r.set("value",f),f=r.get("value")),c.setStyles({width:null,height:null});if(!a.get("checked"))f.match(s.ISPERCENT)?(h=parseInt(f,10),p=this._rawImageDimensions.width/100*h,c.setStyle("width",p+"px")):c.setStyle("width",f+"px"),l.match(s.ISPERCENT)?(h=parseInt(l,10),p=this._rawImageDimensions.height/100*h,c.setStyle("height",p+"px")):c.setStyle("height",l+"px");else{if(t){var d;d=r,r=o,o=d,d=i,i=u,u=d,d=f,f=l,l=d}f.match(s.ISPERCENT)?(l=f,h=parseInt(f,10),p=this._rawImageDimensions.width/100*h,c.setStyle("width",p),p=this._rawImageDimensions.height/100*h,c.setStyle("height",p)):(l=Math.round(f/this._rawImageDimensions[i]*this._rawImageDimensions[u]),t?c.setStyles({width:l,height:f}):c.setStyles({width:f,height:l})),o.set("value",l)}},_filepickerCallback:function(e){if(e.url!==""){var t=this._form.one("."+n.INPUTURL);t.set("value",e.url),this._form.one("."+n.INPUTWIDTH).set("value",""),this._form.one("."+n.INPUTHEIGHT).set("value",""),this._loadPreviewImage(e.url)}},_applyImageProperties:function(e){var t=this._getSelectedImageProperties(),r=e.one("."+n.IMAGEPREVIEW),s,o;if(t===!1){r.setStyle("display","none");for(s in i)i[s].isDefault===!0&&(o=i[s].value+":"+i[s].name+";",e.one("."+n.INPUTALIGNMENT).set("value",o));e.one("."+n.INPUTALIGNMENT).getDOMNode().options.remove(i.length-1);return}t.align?(e.one("."+n.INPUTALIGNMENT).set("value",t.align),e.one("."+n.INPUTALIGNMENT).getDOMNode().options.remove(i.length-1)):e.one("."+n.INPUTALIGNMENT).set("value","style:customstyle;"),t.customstyle&&e.one("."+n.INPUTCUSTOMSTYLE).set("value",t.customstyle),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),this._loadPreviewImage(t.src)),t.presentation&&e.one("."+n.IMAGEPRESENTATION).set("checked","checked"),this._autoAdjustSize()},_getSelectedImageProperties:function(){var e={src:null,alt:null,width:null,height:null,align:"",presentation:!1},t=this.get("host").getSelectedNodes(),n,r,o,u,a,f,l;t&&(t=t.filter("img"));if(t&&t.size()){f=t.item(0),this._selectedImage=f,u=f.getAttribute("style"),e.customstyle=u,u=u.replace(/ /g,""),r=f.getAttribute("width"),r.match(s.ISPERCENT)||(r=parseInt(r,10)),o=f.getAttribute("height"),o.match(s.ISPERCENT)||(o=parseInt(o,10)),r!==0&&(e.width=r),o!==0&&(e.height=o);for(n in i){a=i[n].value+":"+i[n].name+";";if(u.indexOf(a)!==-1){l="margin:"+i[n].margin+";",l=l.replace(/ /g,"");if(u.indexOf(l)!==-1){e.align=a;break}}}return e.src=f.getAttribute("src"),e.alt=f.getAttribute("alt")||"",e.presentation=f.get("role")==="presentation",e}return this._selectedImage=null,!1},_urlChanged:function(){var e=this._form.one("."+n.INPUTURL);e.get("value")!==""&&this._loadPreviewImage(e.get("value"))},_setImage:function(t){var r=this._form,o=r.one("."+n.INPUTURL).get("value"),u=r.one("."+n.INPUTALT).get("value"),f=r.one("."+n.INPUTWIDTH).get("value"),l=r.one("."+n.INPUTHEIGHT).get("value"),c=r.one("."+n.INPUTALIGNMENT).get("value"),h="",p=r.one("."+n.IMAGEPRESENTATION).get("checked"),d=r.one("."+n.INPUTCONSTRAIN).get("checked"),v,m="",g,y,b=[],w=this.get("host");t.preventDefault();if(this._updateWarning())return;w.focus();if(o!==""){this._selectedImage?w
-.setSelection(w.getSelectionFromNode(this._selectedImage)):w.setSelection(this._currentSelection);if(c==="style:customstyle;")c="",m=r.one("."+n.INPUTCUSTOMSTYLE).get("value");else for(g in i)y=i[g].value+":"+i[g].name+";",c===y&&(h=" margin: "+i[g].margin+";");d&&b.push(n.RESPONSIVE);if(!f.match(s.ISPERCENT)&&isNaN(parseInt(f,10))){r.one("."+n.INPUTWIDTH).focus();return}if(!l.match(s.ISPERCENT)&&isNaN(parseInt(l,10))){r.one("."+n.INPUTHEIGHT).focus();return}var E=e.Handlebars.compile(a);v=E({url:o,alt:u,width:f,height:l,presentation:p,alignment:c,margin:h,customstyle:m,classlist:b.join(" ")}),this.get("host").insertContentAtFocusPoint(v),this.markUpdated()}this.getDialogue({focusAfterHide:null}).hide()},_updateWarning:function(){var e=this._form,t=!0,r=e.one("."+n.INPUTALT).get("value"),i=e.one("."+n.IMAGEPRESENTATION).get("checked");return r===""&&!i?(e.one("."+n.IMAGEALTWARNING).setStyle("display","block"),e.one("."+n.INPUTALT).setAttribute("aria-invalid",!0),e.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!0),t=!0):(e.one("."+n.IMAGEALTWARNING).setStyle("display","none"),e.one("."+n.INPUTALT).setAttribute("aria-invalid",!1),e.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!1),t=!1),this.getDialogue().centerDialogue(),t}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});
+YUI.add("moodle-atto_image-button",function(e,t){var n={RESPONSIVE:"img-responsive",INPUTALIGNMENT:"atto_image_alignment",INPUTALT:"atto_image_altentry",INPUTHEIGHT:"atto_image_heightentry",INPUTSUBMIT:"atto_image_urlentrysubmit",INPUTURL:"atto_image_urlentry",INPUTSIZE:"atto_image_size",INPUTWIDTH:"atto_image_widthentry",IMAGEALTWARNING:"atto_image_altwarning",IMAGEBROWSER:"openimagebrowser",IMAGEPRESENTATION:"atto_image_presentation",INPUTCONSTRAIN:"atto_image_constrain",INPUTCUSTOMSTYLE:"atto_image_customstyle",IMAGEPREVIEW:"atto_image_preview",IMAGEPREVIEWBOX:"atto_image_preview_box",ALIGNSETTINGS:"atto_image_button"},r={INPUTURL:"."+n.INPUTURL},i=[{name:"verticalAlign",str:"alignment_top",value:"text-top",margin:"0 0.5em"},{name:"verticalAlign",str:"alignment_middle",value:"middle",margin:"0 0.5em"},{name:"verticalAlign",str:"alignment_bottom",value:"text-bottom",margin:"0 0.5em",isDefault:!0},{name:"float",str:"alignment_left",value:"left",margin:"0 0.5em 0 0"},{name:"float",str:"alignment_right",value:"right",margin:"0 0 0 0.5em"}],s={ISPERCENT:/\d+%/},o="atto_image",u='<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.INPUTSIZE}}">{{get_string "size" component}}</label><div id="{{elementid}}_{{CSS.INPUTSIZE}}" class="{{CSS.INPUTSIZE}}"><label class="accesshide" for="{{elementid}}_{{CSS.INPUTWIDTH}}">{{get_string "width" component}}</label><input type="text" class="{{CSS.INPUTWIDTH}} input-mini" id="{{elementid}}_{{CSS.INPUTWIDTH}}" size="4"/> x <label class="accesshide" for="{{elementid}}_{{CSS.INPUTHEIGHT}}">{{get_string "height" component}}</label><input type="text" class="{{CSS.INPUTHEIGHT}} input-mini" id="{{elementid}}_{{CSS.INPUTHEIGHT}}" size="4"/><input type="checkbox" class="{{CSS.INPUTCONSTRAIN}} sameline" id="{{elementid}}_{{CSS.INPUTCONSTRAIN}}"/><label for="{{elementid}}_{{CSS.INPUTCONSTRAIN}}">{{get_string "constrain" component}}</label></div><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><input type="hidden" class="{{CSS.INPUTCUSTOMSTYLE}}"/><br/><div class="mdl-align"><div class="{{CSS.IMAGEPREVIEWBOX}}"><img src="#" class="{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/></div><button class="{{CSS.INPUTSUBMIT}}" type="submit">{{get_string "saveimage" component}}</button></div></form>',a='<img src="{{url}}" alt="{{alt}}" {{#if width}}width="{{width}}" {{/if}}{{#if height}}height="{{height}}" {{/if}}{{#if presentation}}role="presentation" {{/if}}{{#if customstyle}}style="{{customstyle}}" {{/if}}{{#if classlist}}class="{{classlist}}" {{/if}}{{#if id}}id="{{id}}" {{/if}}/>';e.namespace("M.atto_image").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_selectedImage:null,_form:null,_rawImageDimensions:null,initializer:function(){this.addButton({icon:"e/insert_edit_image",callback:this._displayDialogue,tags:"img",tagMatchRequiresAll:!1}),this.editor.delegate("dblclick",this._displayDialogue,"img",this),this.editor.delegate("click",this._handleClick,"img",this),this.editor.on("drop",this._handleDragDrop,this),this.editor.on("dragover",function(e){e.preventDefault()},this),this.editor.on("dragenter",function(e){e.preventDefault()},this)},_handleDragDrop:function(t){var n=this,r=this.get("host"),i=e.Handlebars.compile(a);r.saveSelection(),t=t._event;var s=t.dataTransfer&&t.dataTransfer.files&&t.dataTransfer.files.length;if(s&&/^image\//.test(t.dataTransfer.files[0].type)){var u=r.get("filepickeroptions").image,f=u.savepath===undefined?"/":u.savepath,l=new FormData,c=0,h="",p=new XMLHttpRequest,d="",v=Object.keys(u.repositories);t.preventDefault(),t.stopPropagation(),l.append("repo_upload_file",t.dataTransfer.files[0]),l.append("itemid",u.itemid);for(var m=0;m<v.length;m++)if(u.repositories[v[m]].type==="upload"){l.append("repo_id",u.repositories[v[m]].id);break}return l.append("env",u.env),l.append("sesskey",M.cfg.sesskey),l.append("client_id",u.client_id),l.append("savepath",f),l.append("ctx_id",u.context.id),c=(new Date).getTime(),h="moodleimage_"+Math.round(Math.random()*1e5)+"-"+c,r.focus(),r.restoreSelection(),d=i({url:M.util.image_url("i/loading_small","moodle"),alt:M.util.get_string("uploading",o),id:h}),r.insertContentAtFocusPoint(d),n.markUpdated(),p.onreadystatechange=function(){var t=n.editor.one("#"+h),r,s,o,u;if(p.readyState===4)if(p.status===200){r=JSON.parse(p.responseText);if(r){if(r.error)return t&&t.remove(!0),new M.core.ajaxException(r);s=r,r.event&&r.event==="fileexists"&&(s=r.newfile),o=i({url:s.url,presentation:!0}),u=e.Node.create(o),t?t.replace(u):n.editor.appendChild(u),n.markUpdated()}}else e.use("moodle-core-notification-alert",function(){new M.core.alert({message:M.util.get_string("servererror","moodle")})}),t&&t.remove(!0)},p.open("POST",M.cfg.wwwroot+"/repository/repository_ajax.php?action=upload",!0),p.send(l),!1}},_handleClick:function(e){var t=e.target,n=this.get
+("host").getSelectionFromNode(t);this.get("host").getSelection()!==n&&this.get("host").setSelection(n)},_displayDialogue:function(){this._currentSelection=this.get("host").getSelection();if(this._currentSelection===!1)return;this._rawImageDimensions=null;var e=this.getDialogue({headerContent:M.util.get_string("imageproperties",o),width:"480px",focusAfterHide:!0,focusOnShowSelector:r.INPUTURL});e.set("bodyContent",this._getDialogueContent()).show()},_loadPreviewImage:function(e){var t=new Image,r=this;t.onerror=function(){var e=r._form.one("."+n.IMAGEPREVIEW);e.setStyles({display:"none"}),r.getDialogue().centerDialogue()},t.onload=function(){var e,t,i,o,u;r._rawImageDimensions={width:this.width,height:this.height},e=r._form.one("."+n.INPUTWIDTH),t=e.get("value"),t===""&&(e.set("value",this.width),t=""+this.width),e=r._form.one("."+n.INPUTHEIGHT),i=e.get("value"),i===""&&(e.set("value",this.height),i=""+this.height),e=r._form.one("."+n.IMAGEPREVIEW),e.setAttribute("src",this.src),e.setStyles({display:"inline"}),e=r._form.one("."+n.INPUTCONSTRAIN),t.match(s.ISPERCENT)&&i.match(s.ISPERCENT)?e.set("checked",t===i):(this.width===0&&(this.width=1),this.height===0&&(this.height=1),o=Math.round(1e3*parseInt(t,10)/this.width),u=Math.round(1e3*parseInt(i,10)/this.height),e.set("checked",o===u)),r._autoAdjustSize(r),r.getDialogue().centerDialogue()},t.src=e},_getDialogueContent:function(){var t=e.Handlebars.compile(u),r=this.get("host").canShowFilepicker("image"),s=e.Node.create(t({elementid:this.get("host").get("elementid"),CSS:n,component:o,showFilepicker:r,alignments:i}));return this._form=s,this._applyImageProperties(this._form),this._form.one("."+n.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+n.IMAGEPRESENTATION).on("change",this._updateWarning,this),this._form.one("."+n.INPUTALT).on("change",this._updateWarning,this),this._form.one("."+n.INPUTWIDTH).on("blur",this._autoAdjustSize,this),this._form.one("."+n.INPUTHEIGHT).on("blur",this._autoAdjustSize,this,!0),this._form.one("."+n.INPUTCONSTRAIN).on("change",function(e){e.target.get("checked")&&this._autoAdjustSize(e)},this),this._form.one("."+n.INPUTURL).on("blur",this._urlChanged,this),this._form.one("."+n.INPUTSUBMIT).on("click",this._setImage,this),r&&this._form.one("."+n.IMAGEBROWSER).on("click",function(){this.get("host").showFilepicker("image",this._filepickerCallback,this)},this),s},_autoAdjustSize:function(e,t){t=t||!1;var r=this._form.one("."+n.INPUTWIDTH),i="width",o=this._form.one("."+n.INPUTHEIGHT),u="height",a=this._form.one("."+n.INPUTCONSTRAIN),f=r.get("value"),l=o.get("value"),c=this._form.one("."+n.IMAGEPREVIEW),h,p;if(!this._rawImageDimensions)return;f===""&&(f=this._rawImageDimensions[i],r.set("value",f),f=r.get("value")),c.setStyles({width:null,height:null});if(!a.get("checked"))f.match(s.ISPERCENT)?(h=parseInt(f,10),p=this._rawImageDimensions.width/100*h,c.setStyle("width",p+"px")):c.setStyle("width",f+"px"),l.match(s.ISPERCENT)?(h=parseInt(l,10),p=this._rawImageDimensions.height/100*h,c.setStyle("height",p+"px")):c.setStyle("height",l+"px");else{if(t){var d;d=r,r=o,o=d,d=i,i=u,u=d,d=f,f=l,l=d}f.match(s.ISPERCENT)?(l=f,h=parseInt(f,10),p=this._rawImageDimensions.width/100*h,c.setStyle("width",p),p=this._rawImageDimensions.height/100*h,c.setStyle("height",p)):(l=Math.round(f/this._rawImageDimensions[i]*this._rawImageDimensions[u]),t?c.setStyles({width:l,height:f}):c.setStyles({width:f,height:l})),o.set("value",l)}},_filepickerCallback:function(e){if(e.url!==""){var t=this._form.one("."+n.INPUTURL);t.set("value",e.url),this._form.one("."+n.INPUTWIDTH).set("value",""),this._form.one("."+n.INPUTHEIGHT).set("value",""),this._loadPreviewImage(e.url)}},_applyImageProperties:function(e){var t=this._getSelectedImageProperties(),r=e.one("."+n.IMAGEPREVIEW);if(t===!1){r.setStyle("display","none"),i.some(function(t){return t.isDefault?(e.one("."+n.INPUTALIGNMENT).set("value",t.value),!0):!1},this);return}t.align&&e.one("."+n.INPUTALIGNMENT).set("value",t.align),t.customstyle&&e.one("."+n.INPUTCUSTOMSTYLE).set("value",t.customstyle),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),this._loadPreviewImage(t.src)),t.presentation&&e.one("."+n.IMAGEPRESENTATION).set("checked","checked"),this._autoAdjustSize()},_getSelectedImageProperties:function(){var e={src:null,alt:null,width:null,height:null,align:"",presentation:!1},t=this.get("host").getSelectedNodes(),n,r,i,o;return t&&(t=t.filter("img")),t&&t.size()?(o=this._removeLegacyAlignment(t.item(0)),this._selectedImage=o,i=o.getAttribute("style"),e.customstyle=i,n=o.getAttribute("width"),n.match(s.ISPERCENT)||(n=parseInt(n,10)),r=o.getAttribute("height"),r.match(s.ISPERCENT)||(r=parseInt(r,10)),n!==0&&(e.width=n),r!==0&&(e.height=r),this._getAlignmentPropeties(o,e),e.src=o.getAttribute("src"),e.alt=o.getAttribute("alt")||"",e.presentation=o.get("role")==="presentation",e):(this._selectedImage=null,!1)},_getAlignmentPropeties:function(e,t){var n=!1,r;n=i.some(function(n){var i=this._getAlignmentClass(n.value);return e.hasClass(i)?(t.align=n.value,!0):(n.isDefault&&(r=n.value),!1)},this),!n&&r&&(t.align=r)},_urlChanged:function(){var e=this._form.one("."+n.INPUTURL);e.get("value")!==""&&this._loadPreviewImage(e.get("value"))},_setImage:function(t){var r=this._form,i=r.one("."+n.INPUTURL).get("value"),o=r.one("."+n.INPUTALT).get("value"),u=r.one("."+n.INPUTWIDTH).get("value"),f=r.one("."+n.INPUTHEIGHT).get("value"),l=this._getAlignmentClass(r.one("."+n.INPUTALIGNMENT).get("value")),c=r.one("."+n.IMAGEPRESENTATION).get("checked"),h=r.one("."+n.INPUTCONSTRAIN).get("checked"),p,d=r.one("."+n.INPUTCUSTOMSTYLE).get("value"),v=[],m=this.get("host");t.preventDefault();if(this._updateWarning())return;m.focus();if(i!==""){this._selectedImage?m.setSelection(m.getSelectionFromNode(this._selectedImage)):m.setSelection(this._currentSelection
+),h&&v.push(n.RESPONSIVE),v.push(l);if(!u.match(s.ISPERCENT)&&isNaN(parseInt(u,10))){r.one("."+n.INPUTWIDTH).focus();return}if(!f.match(s.ISPERCENT)&&isNaN(parseInt(f,10))){r.one("."+n.INPUTHEIGHT).focus();return}var g=e.Handlebars.compile(a);p=g({url:i,alt:o,width:u,height:f,presentation:c,customstyle:d,classlist:v.join(" ")}),this.get("host").insertContentAtFocusPoint(p),this.markUpdated()}this.getDialogue({focusAfterHide:null}).hide()},_removeLegacyAlignment:function(t){return t.getStyle("margin")?(i.some(function(n){if(t.getStyle(n.name)!==n.value)return!1;var r=e.Node.create("<div>");return r.setStyle("margin",n.margin),t.getStyle("margin")!==r.getStyle("margin")?!1:(t.addClass(this._getAlignmentClass(n.value)),t.setStyle(n.name,null),t.setStyle("margin",null),!0)},this),t):t},_getAlignmentClass:function(e){return n.ALIGNSETTINGS+"_"+e},_updateWarning:function(){var e=this._form,t=!0,r=e.one("."+n.INPUTALT).get("value"),i=e.one("."+n.IMAGEPRESENTATION).get("checked");return r===""&&!i?(e.one("."+n.IMAGEALTWARNING).setStyle("display","block"),e.one("."+n.INPUTALT).setAttribute("aria-invalid",!0),e.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!0),t=!0):(e.one("."+n.IMAGEALTWARNING).setStyle("display","none"),e.one("."+n.INPUTALT).setAttribute("aria-invalid",!1),e.one("."+n.IMAGEPRESENTATION).setAttribute("aria-invalid",!1),t=!1),this.getDialogue().centerDialogue(),t}})},"@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 c0493175056..1cf57d06852 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
@@ -48,7 +48,8 @@ var CSS = {
         INPUTCONSTRAIN: 'atto_image_constrain',
         INPUTCUSTOMSTYLE: 'atto_image_customstyle',
         IMAGEPREVIEW: 'atto_image_preview',
-        IMAGEPREVIEWBOX: 'atto_image_preview_box'
+        IMAGEPREVIEWBOX: 'atto_image_preview_box',
+        ALIGNSETTINGS: 'atto_image_button'
     },
     SELECTORS = {
         INPUTURL: '.' + CSS.INPUTURL
@@ -56,38 +57,34 @@ var CSS = {
     ALIGNMENTS = [
         // Vertical alignment.
         {
-            name: 'text-top',
+            name: 'verticalAlign',
             str: 'alignment_top',
-            value: 'vertical-align',
-            margin: '0 .5em'
+            value: 'text-top',
+            margin: '0 0.5em'
         }, {
-            name: 'middle',
+            name: 'verticalAlign',
             str: 'alignment_middle',
-            value: 'vertical-align',
-            margin: '0 .5em'
+            value: 'middle',
+            margin: '0 0.5em'
         }, {
-            name: 'text-bottom',
+            name: 'verticalAlign',
             str: 'alignment_bottom',
-            value: 'vertical-align',
-            margin: '0 .5em',
+            value: 'text-bottom',
+            margin: '0 0.5em',
             isDefault: true
         },
 
         // Floats.
         {
-            name: 'left',
+            name: 'float',
             str: 'alignment_left',
-            value: 'float',
-            margin: '0 .5em 0 0'
+            value: 'left',
+            margin: '0 0.5em 0 0'
         }, {
-            name: 'right',
+            name: 'float',
             str: 'alignment_right',
-            value: 'float',
-            margin: '0 0 0 .5em'
-        }, {
-            name: 'customstyle',
-            str: 'customstyle',
-            value: 'style'
+            value: 'right',
+            margin: '0 0 0 0.5em'
         }
     ],
 
@@ -142,7 +139,7 @@ var CSS = {
                 '<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>' +
+                        '<option value="{{value}}">{{get_string str ../component}}</option>' +
                     '{{/each}}' +
                 '</select>' +
                 // Hidden input to store custom styles.
@@ -165,7 +162,7 @@ var CSS = {
                 '{{#if width}}width="{{width}}" {{/if}}' +
                 '{{#if height}}height="{{height}}" {{/if}}' +
                 '{{#if presentation}}role="presentation" {{/if}}' +
-                'style="{{alignment}}{{margin}}{{customstyle}}"' +
+                '{{#if customstyle}}style="{{customstyle}}" {{/if}}' +
                 '{{#if classlist}}class="{{classlist}}" {{/if}}' +
                 '{{#if id}}id="{{id}}" {{/if}}' +
                 '/>';
@@ -230,6 +227,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
      *
      * @method _handleDragDrop
      * @param {EventFacade} e
+     * @return mixed
      * @private
      */
     _handleDragDrop: function(e) {
@@ -642,30 +640,25 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
      */
     _applyImageProperties: function(form) {
         var properties = this._getSelectedImageProperties(),
-            img = form.one('.' + CSS.IMAGEPREVIEW),
-            i,
-            css;
+            img = form.one('.' + CSS.IMAGEPREVIEW);
 
         if (properties === false) {
             img.setStyle('display', 'none');
             // Set the default alignment.
-            for (i in ALIGNMENTS) {
-                if (ALIGNMENTS[i].isDefault === true) {
-                    css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
-                    form.one('.' + CSS.INPUTALIGNMENT).set('value', css);
+            ALIGNMENTS.some(function(alignment) {
+                if (alignment.isDefault) {
+                    form.one('.' + CSS.INPUTALIGNMENT).set('value', alignment.value);
+                    return true;
                 }
-            }
-            // Remove the custom style option if this is a new image.
-            form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1);
+
+                return false;
+            }, this);
+
             return;
         }
 
         if (properties.align) {
             form.one('.' + CSS.INPUTALIGNMENT).set('value', properties.align);
-            // Remove the custom style option if we have a standard alignment.
-            form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1);
-        } else {
-            form.one('.' + CSS.INPUTALIGNMENT).set('value', 'style:customstyle;');
         }
         if (properties.customstyle) {
             form.one('.' + CSS.INPUTCUSTOMSTYLE).set('value', properties.customstyle);
@@ -712,25 +705,21 @@ 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,
-            css,
-            image,
-            margin;
+            image;
 
         if (images) {
             images = images.filter('img');
         }
 
         if (images && images.size()) {
-            image = images.item(0);
+            image = this._removeLegacyAlignment(images.item(0));
             this._selectedImage = image;
 
             style = image.getAttribute('style');
             properties.customstyle = style;
-            style = style.replace(/ /g, '');
 
             width = image.getAttribute('width');
             if (!width.match(REGEX.ISPERCENT)) {
@@ -747,18 +736,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             if (height !== 0) {
                 properties.height = height;
             }
-            for (i in ALIGNMENTS) {
-                css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
-                if (style.indexOf(css) !== -1) {
-                    margin = 'margin:' + ALIGNMENTS[i].margin + ';';
-                    margin = margin.replace(/ /g, '');
-                    // Must match alignment and margins - otherwise custom style is selected.
-                    if (style.indexOf(margin) !== -1) {
-                        properties.align = css;
-                        break;
-                    }
-                }
-            }
+            this._getAlignmentPropeties(image, properties);
             properties.src = image.getAttribute('src');
             properties.alt = image.getAttribute('alt') || '';
             properties.presentation = (image.get('role') === 'presentation');
@@ -770,6 +748,39 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         return false;
     },
 
+    /**
+     * Sets the alignment of a properties object.
+     *
+     * @method _getAlignmentPropeties
+     * @param {Node} image The image that the alignment properties should be found for
+     * @param {Object} properties The properties object that is created in _getSelectedImageProperties()
+     * @private
+     */
+    _getAlignmentPropeties: function(image, properties) {
+        var complete = false,
+            defaultAlignment;
+
+        // Check for an alignment value.
+        complete = ALIGNMENTS.some(function(alignment) {
+            var classname = this._getAlignmentClass(alignment.value);
+            if (image.hasClass(classname)) {
+                properties.align = alignment.value;
+
+                return true;
+            }
+
+            if (alignment.isDefault) {
+                defaultAlignment = alignment.value;
+            }
+
+            return false;
+        }, this);
+
+        if (!complete && defaultAlignment) {
+            properties.align = defaultAlignment;
+        }
+    },
+
     /**
      * Update the form when the URL was changed. This includes updating the
      * height, width, and image preview.
@@ -799,14 +810,11 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             alt = form.one('.' + CSS.INPUTALT).get('value'),
             width = form.one('.' + CSS.INPUTWIDTH).get('value'),
             height = form.one('.' + CSS.INPUTHEIGHT).get('value'),
-            alignment = form.one('.' + CSS.INPUTALIGNMENT).get('value'),
-            margin = '',
+            alignment = this._getAlignmentClass(form.one('.' + CSS.INPUTALIGNMENT).get('value')),
             presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked'),
             constrain = form.one('.' + CSS.INPUTCONSTRAIN).get('checked'),
             imagehtml,
-            customstyle = '',
-            i,
-            css,
+            customstyle = form.one('.' + CSS.INPUTCUSTOMSTYLE).get('value'),
             classlist = [],
             host = this.get('host');
 
@@ -826,22 +834,13 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
                 host.setSelection(this._currentSelection);
             }
 
-            if (alignment === 'style:customstyle;') {
-                alignment = '';
-                customstyle = form.one('.' + CSS.INPUTCUSTOMSTYLE).get('value');
-            } else {
-                for (i in ALIGNMENTS) {
-                    css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
-                    if (alignment === css) {
-                        margin = ' margin: ' + ALIGNMENTS[i].margin + ';';
-                    }
-                }
-            }
-
             if (constrain) {
                 classlist.push(CSS.RESPONSIVE);
             }
 
+            // Add the alignment class for the image.
+            classlist.push(alignment);
+
             if (!width.match(REGEX.ISPERCENT) && isNaN(parseInt(width, 10))) {
                 form.one('.' + CSS.INPUTWIDTH).focus();
                 return;
@@ -858,8 +857,6 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
                 width: width,
                 height: height,
                 presentation: presentation,
-                alignment: alignment,
-                margin: margin,
                 customstyle: customstyle,
                 classlist: classlist.join(' ')
             });
@@ -875,6 +872,47 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
 
     },
 
+    /**
+     * Removes any legacy styles added by previous versions of the atto image button.
+     *
+     * @method _removeLegacyAlignment
+     * @param {Y.Node} imageNode
+     * @return {Y.Node}
+     * @private
+     */
+    _removeLegacyAlignment: function(imageNode) {
+        if (!imageNode.getStyle('margin')) {
+            // There is no margin therefore this cannot match any known alignments.
+            return imageNode;
+        }
+
+        ALIGNMENTS.some(function(alignment) {
+            if (imageNode.getStyle(alignment.name) !== alignment.value) {
+                // The name/value do not match. Skip.
+                return false;
+            }
+
+            var normalisedNode = Y.Node.create('<div>');
+            normalisedNode.setStyle('margin', alignment.margin);
+            if (imageNode.getStyle('margin') !== normalisedNode.getStyle('margin')) {
+                // The margin does not match.
+                return false;
+            }
+
+            imageNode.addClass(this._getAlignmentClass(alignment.value));
+            imageNode.setStyle(alignment.name, null);
+            imageNode.setStyle('margin', null);
+
+            return true;
+        }, this);
+
+        return imageNode;
+    },
+
+    _getAlignmentClass: function(alignment) {
+        return CSS.ALIGNSETTINGS + '_' + alignment;
+    },
+
     /**
      * Update the alt text warning live.
      *
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 f59848de497..7a8f82d799c 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
@@ -46,7 +46,8 @@ var CSS = {
         INPUTCONSTRAIN: 'atto_image_constrain',
         INPUTCUSTOMSTYLE: 'atto_image_customstyle',
         IMAGEPREVIEW: 'atto_image_preview',
-        IMAGEPREVIEWBOX: 'atto_image_preview_box'
+        IMAGEPREVIEWBOX: 'atto_image_preview_box',
+        ALIGNSETTINGS: 'atto_image_button'
     },
     SELECTORS = {
         INPUTURL: '.' + CSS.INPUTURL
@@ -54,38 +55,34 @@ var CSS = {
     ALIGNMENTS = [
         // Vertical alignment.
         {
-            name: 'text-top',
+            name: 'verticalAlign',
             str: 'alignment_top',
-            value: 'vertical-align',
-            margin: '0 .5em'
+            value: 'text-top',
+            margin: '0 0.5em'
         }, {
-            name: 'middle',
+            name: 'verticalAlign',
             str: 'alignment_middle',
-            value: 'vertical-align',
-            margin: '0 .5em'
+            value: 'middle',
+            margin: '0 0.5em'
         }, {
-            name: 'text-bottom',
+            name: 'verticalAlign',
             str: 'alignment_bottom',
-            value: 'vertical-align',
-            margin: '0 .5em',
+            value: 'text-bottom',
+            margin: '0 0.5em',
             isDefault: true
         },
 
         // Floats.
         {
-            name: 'left',
+            name: 'float',
             str: 'alignment_left',
-            value: 'float',
-            margin: '0 .5em 0 0'
+            value: 'left',
+            margin: '0 0.5em 0 0'
         }, {
-            name: 'right',
+            name: 'float',
             str: 'alignment_right',
-            value: 'float',
-            margin: '0 0 0 .5em'
-        }, {
-            name: 'customstyle',
-            str: 'customstyle',
-            value: 'style'
+            value: 'right',
+            margin: '0 0 0 0.5em'
         }
     ],
 
@@ -140,7 +137,7 @@ var CSS = {
                 '<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>' +
+                        '<option value="{{value}}">{{get_string str ../component}}</option>' +
                     '{{/each}}' +
                 '</select>' +
                 // Hidden input to store custom styles.
@@ -163,7 +160,7 @@ var CSS = {
                 '{{#if width}}width="{{width}}" {{/if}}' +
                 '{{#if height}}height="{{height}}" {{/if}}' +
                 '{{#if presentation}}role="presentation" {{/if}}' +
-                'style="{{alignment}}{{margin}}{{customstyle}}"' +
+                '{{#if customstyle}}style="{{customstyle}}" {{/if}}' +
                 '{{#if classlist}}class="{{classlist}}" {{/if}}' +
                 '{{#if id}}id="{{id}}" {{/if}}' +
                 '/>';
@@ -228,6 +225,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
      *
      * @method _handleDragDrop
      * @param {EventFacade} e
+     * @return mixed
      * @private
      */
     _handleDragDrop: function(e) {
@@ -640,30 +638,25 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
      */
     _applyImageProperties: function(form) {
         var properties = this._getSelectedImageProperties(),
-            img = form.one('.' + CSS.IMAGEPREVIEW),
-            i,
-            css;
+            img = form.one('.' + CSS.IMAGEPREVIEW);
 
         if (properties === false) {
             img.setStyle('display', 'none');
             // Set the default alignment.
-            for (i in ALIGNMENTS) {
-                if (ALIGNMENTS[i].isDefault === true) {
-                    css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
-                    form.one('.' + CSS.INPUTALIGNMENT).set('value', css);
+            ALIGNMENTS.some(function(alignment) {
+                if (alignment.isDefault) {
+                    form.one('.' + CSS.INPUTALIGNMENT).set('value', alignment.value);
+                    return true;
                 }
-            }
-            // Remove the custom style option if this is a new image.
-            form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1);
+
+                return false;
+            }, this);
+
             return;
         }
 
         if (properties.align) {
             form.one('.' + CSS.INPUTALIGNMENT).set('value', properties.align);
-            // Remove the custom style option if we have a standard alignment.
-            form.one('.' + CSS.INPUTALIGNMENT).getDOMNode().options.remove(ALIGNMENTS.length - 1);
-        } else {
-            form.one('.' + CSS.INPUTALIGNMENT).set('value', 'style:customstyle;');
         }
         if (properties.customstyle) {
             form.one('.' + CSS.INPUTCUSTOMSTYLE).set('value', properties.customstyle);
@@ -710,25 +703,21 @@ 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,
-            css,
-            image,
-            margin;
+            image;
 
         if (images) {
             images = images.filter('img');
         }
 
         if (images && images.size()) {
-            image = images.item(0);
+            image = this._removeLegacyAlignment(images.item(0));
             this._selectedImage = image;
 
             style = image.getAttribute('style');
             properties.customstyle = style;
-            style = style.replace(/ /g, '');
 
             width = image.getAttribute('width');
             if (!width.match(REGEX.ISPERCENT)) {
@@ -745,18 +734,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             if (height !== 0) {
                 properties.height = height;
             }
-            for (i in ALIGNMENTS) {
-                css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
-                if (style.indexOf(css) !== -1) {
-                    margin = 'margin:' + ALIGNMENTS[i].margin + ';';
-                    margin = margin.replace(/ /g, '');
-                    // Must match alignment and margins - otherwise custom style is selected.
-                    if (style.indexOf(margin) !== -1) {
-                        properties.align = css;
-                        break;
-                    }
-                }
-            }
+            this._getAlignmentPropeties(image, properties);
             properties.src = image.getAttribute('src');
             properties.alt = image.getAttribute('alt') || '';
             properties.presentation = (image.get('role') === 'presentation');
@@ -768,6 +746,40 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         return false;
     },
 
+    /**
+     * Sets the alignment of a properties object.
+     *
+     * @method _getAlignmentPropeties
+     * @param {Node} image The image that the alignment properties should be found for
+     * @param {Object} properties The properties object that is created in _getSelectedImageProperties()
+     * @private
+     */
+    _getAlignmentPropeties: function(image, properties) {
+        var complete = false,
+            defaultAlignment;
+
+        // Check for an alignment value.
+        complete = ALIGNMENTS.some(function(alignment) {
+            var classname = this._getAlignmentClass(alignment.value);
+            if (image.hasClass(classname)) {
+                properties.align = alignment.value;
+                Y.log('Found alignment ' + alignment.value, 'debug', 'atto_image-button');
+
+                return true;
+            }
+
+            if (alignment.isDefault) {
+                defaultAlignment = alignment.value;
+            }
+
+            return false;
+        }, this);
+
+        if (!complete && defaultAlignment) {
+            properties.align = defaultAlignment;
+        }
+    },
+
     /**
      * Update the form when the URL was changed. This includes updating the
      * height, width, and image preview.
@@ -797,14 +809,11 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             alt = form.one('.' + CSS.INPUTALT).get('value'),
             width = form.one('.' + CSS.INPUTWIDTH).get('value'),
             height = form.one('.' + CSS.INPUTHEIGHT).get('value'),
-            alignment = form.one('.' + CSS.INPUTALIGNMENT).get('value'),
-            margin = '',
+            alignment = this._getAlignmentClass(form.one('.' + CSS.INPUTALIGNMENT).get('value')),
             presentation = form.one('.' + CSS.IMAGEPRESENTATION).get('checked'),
             constrain = form.one('.' + CSS.INPUTCONSTRAIN).get('checked'),
             imagehtml,
-            customstyle = '',
-            i,
-            css,
+            customstyle = form.one('.' + CSS.INPUTCUSTOMSTYLE).get('value'),
             classlist = [],
             host = this.get('host');
 
@@ -824,22 +833,13 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
                 host.setSelection(this._currentSelection);
             }
 
-            if (alignment === 'style:customstyle;') {
-                alignment = '';
-                customstyle = form.one('.' + CSS.INPUTCUSTOMSTYLE).get('value');
-            } else {
-                for (i in ALIGNMENTS) {
-                    css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
-                    if (alignment === css) {
-                        margin = ' margin: ' + ALIGNMENTS[i].margin + ';';
-                    }
-                }
-            }
-
             if (constrain) {
                 classlist.push(CSS.RESPONSIVE);
             }
 
+            // Add the alignment class for the image.
+            classlist.push(alignment);
+
             if (!width.match(REGEX.ISPERCENT) && isNaN(parseInt(width, 10))) {
                 form.one('.' + CSS.INPUTWIDTH).focus();
                 return;
@@ -856,8 +856,6 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
                 width: width,
                 height: height,
                 presentation: presentation,
-                alignment: alignment,
-                margin: margin,
                 customstyle: customstyle,
                 classlist: classlist.join(' ')
             });
@@ -873,6 +871,48 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
 
     },
 
+    /**
+     * Removes any legacy styles added by previous versions of the atto image button.
+     *
+     * @method _removeLegacyAlignment
+     * @param {Y.Node} imageNode
+     * @return {Y.Node}
+     * @private
+     */
+    _removeLegacyAlignment: function(imageNode) {
+        if (!imageNode.getStyle('margin')) {
+            // There is no margin therefore this cannot match any known alignments.
+            return imageNode;
+        }
+
+        ALIGNMENTS.some(function(alignment) {
+            if (imageNode.getStyle(alignment.name) !== alignment.value) {
+                // The name/value do not match. Skip.
+                return false;
+            }
+
+            var normalisedNode = Y.Node.create('<div>');
+            normalisedNode.setStyle('margin', alignment.margin);
+            if (imageNode.getStyle('margin') !== normalisedNode.getStyle('margin')) {
+                // The margin does not match.
+                return false;
+            }
+
+            Y.log('Legacy alignment found and removed.', 'info', 'atto_image-button');
+            imageNode.addClass(this._getAlignmentClass(alignment.value));
+            imageNode.setStyle(alignment.name, null);
+            imageNode.setStyle('margin', null);
+
+            return true;
+        }, this);
+
+        return imageNode;
+    },
+
+    _getAlignmentClass: function(alignment) {
+        return CSS.ALIGNSETTINGS + '_' + alignment;
+    },
+
     /**
      * Update the alt text warning live.
      *