--- title: Alignment description: Centering, images, text, buttons, and menus in HTML emails made easy. --- Foundation includes a handful of helpful alignment classes to add common positioning behaviors to elements. --- ## Text Alignment You can align text with the `.text-x` classes. These classes will appy to the large breakpoint as well as the small. ```inky_example

Left (default)

center

right

 ``` If you need to change text alignment only on the small breakpoint, you can use the `.small-text-x` classes. ```inky_example

Left on small

Center on small

Right on small

 ``` You can combine these classes to override the behavior on the small breakpoint. ```inky_example

Center, small left

Right, small center

 ``` --- ## Centering Images Just wrap the `
` around an image you’ll be good to go. Inky will handle the magic behind the scenes! In the CSS version, you’ll add a `.float-center` class, `align="center"` attribute and wrap a <center> tag to make sure things are centered. ```inky_example
image of clever meme that made me chuckle
``` So to be clear: with Inky you only need to wrap an image in `
` tag to reliably center it. In the CSS version, our centering recipe includes three ingredients: - `.float-center` class on the `` element - `align="center"` attribute on the `` element - Wrap the `` with `
` tags (needed for Outlook 2007, 2010, and 2011) Also, it's not really a float, but the `.float-center` class to an element to engage the automatic margin centering trick. Note that this will only work on elements with an absolute width, which means not a percentage or auto width. If you need to center an image only on mobile clients, you can apply the `.small-float-center` class. A good use case would be centering an image smaller than the full column width on devices like an iPhone 5, iPhone 6, and Android 4.4. ```inky_example please don't forget me

What is the deal?

Sweet beast sun bathe or chase mice rub face on everything or leave dead animals as gifts for mark territory play time.

 ``` --- ## Aligning Images Left and Right You can also align images to the left or the right. ```inky_example ``` --- ## Centering a Button Wrap the button with `
` tags to center it. ```inky_example
``` --- ## Centering Columns Tables by nature take up as much space is available to them. Because of this, centering columns can be done by adding empty columns to left and right of the column to be centered. ```inky_example Centering a column Centering a column Centering a column ``` If you don't add a size attribute like `small="x"` then the columns will be equal width. --- ## Centering a Menu Centering the menu is a common practice. Wrapping the menu in `
` tags will achieve this. ```inky_example
Item Item Item
``` --- ## Vertical Alignment You can vertically align your content within columns by using `valign` attribute. The available values are `top`, `middle`, and `bottom`. ```inky_example

Bottom

HEADLINE

SUBHEADLINE

 ```