When <menu> is wrapped in a <center> tag, properly apply align='cente…

…r', and apply the class 'float-center' instead of 'text-center'

lib/componentFactory.js

@@ -70,7 +70,8 @@ module.exports = function(element) {
       if (element.attr('class')) {
         classes = classes.concat(element.attr('class').split(' '));
       }
-      return format('<table class="%s"><tr><td><table><tr>%s</tr></table></td></tr></table>', classes.join(' '), inner);
+      var centerAttr = element.attr('align') ? 'align="center"' : '';
+      return format('<table class="%s"%s><tr><td><table><tr>%s</tr></table></td></tr></table>', classes.join(' '), centerAttr, inner);
 
     // <item>
     case this.components.menuItem:
@@ -83,9 +84,10 @@ module.exports = function(element) {
     // <center>
     case this.components.center:
       if (element.children().length > 0) {
-        element.children()
-          .attr('align', 'center')
-          .addClass('text-center');
+        element.children().each(function() {
+          $(this).attr('align', 'center');
+          $(this).addClass($(this).is('menu, .menu') ? 'float-center' : 'text-center');
+        });
       }
 
       element.attr('data-parsed', '');

test/components.js

@@ -33,6 +33,30 @@ describe('Center', () => {
 
     compare(input, expected);
   });
+
+  it('applies the class float-center instead of text-center to <menu>', () => {
+    var input = `
+      <center>
+        <menu></menu>
+      </center>
+    `;
+
+    var expected = `
+      <center data-parsed="">
+        <table class="menu float-center" align="center">
+          <tr>
+            <td>
+              <table>
+                <tr></tr>
+              </table>
+            </td>
+          </tr>
+        </table>
+      </center>
+    `;
+
+    compare(input, expected);
+  });
 });
 
 describe('Button', () => {