Using Alignment for Layout
When you want to place an item on the left, right, top, or bottom of its container, use the Align feature in Builder's Visual Editor.
Prerequisites
To get the most out of this article, make sure you are familiar with the following:
Alignment examples
The following image shows three image blocks in the Visual Editor. The image blocks are within a full-width gray box: the first box is left aligned; the second is centered; and the third is right aligned.
Putting Blocks in Containers
When using alignment, consider placing the item you'd like to align within another container, such as a Box. By nesting a block within another container, you give the block a context for alignment.
If you don't put the block inside another block, its parent container is then the larger context of the page or section. While a Section block is usually a suitable context, a Page might be too large, with unexpected results, especially as content increases. For more information on conceptualizing your layout, refer to The Box Model.
Find Align settings in the Layout section
The Layout section is at the top of the Style Tab in the Visual Editor. Use the Layout section to push a block left, right, center, up, down, or make the block full-width. In the Layout section, you can also set a minimum or maximum width on the block, which prevents the block from getting too big or too small.
Alignment and width work together in layouts. This article focuses on alignment. For more information on how to use width effectively in your layouts, refer to How Width Affects Layout.
Fill width: make the block full width
To make a block take up the width of its parent container, select the block and click the Fill width setting in the Layout section of the Style tab.
The following example features a Box with a gray background and a 20 pixel padding all around to help distinguish the Box for demonstration purposes. Within the Box is an Image block with default settings.
By default, the image width is 100% and the alignment setting is set to Fill width. With the default settings for the Image and Box blocks, the Image takes up all of the horizontal space.
For this example, if you wanted the image to fill up the Box all the way to the edge, you'd take the padding off of the containing Box.
If you were to specify a max-width on the image, the Box would remain full width but the image would be limited in terms of how big it could get. In the following screenshot, the image has a max-width of 300 pixels, so it remains small.
In this case, though the Image block's alignment is set to Fill Width, the image also has a max-width of 300 pixels on it, which means that no matter what, the image will not exceed 300 pixels. To get this image to go from one side of the gray Box to the other you'd have to remove the max-width
Aligning blocks to the left or right
To align a block to the left, select the block and click the Left Align icon in the Layout section of the Style tab. Make sure you have the block you want to push to the left selected, rather than the block it's nested inside.
To align a block to the right, select the block and click the Right Align icon in the Layout section of the Style tab.
If you have an image that is taking up the full width even though you've clicked the Align Left or Align Right setting, put a max-width on the block.
The following example has a 300 pixel max-wdith on the image block, which means that the image never gets wider than 300 pixels. If you didn't specify a max-width, the image would take up all the available space, so that aligning the image left would appear to look just like Fill width.
Aligning text
When you have an Image block or a Box, and you drop a Text block onto it, The Box or Image collapses if it doesn't have a specified height, as in the following example. This is natural browser behavior because images nor boxes don't have an inherent height.
To keep the Image or Box from collapsing, specify a minimum height in the Layout section of the Style tab. The image in the following example has a min-height of 600 pixels, which prevents it from ever being any smaller than 600px tall. The minimum height can vary and depends on the size of your image.
Whenever you set heights or widths, be sure to check Tablet and Phone views and adjust settings for smaller screens.
Centering blocks horizontally
To center a block horizontally, select the block and click the Center Horizontally icon in the Layout section of the Style tab.
In the following image, the text block is centered horizontally. This automatically causes the width of the text block to shrink to its contents. To edit the spacing of the text block, refer to Margin and Padding.
Top-aligning blocks
To place a block at the top of its containing block, select the block you want to move and click the Top Align icon in the Layout section of the Style tab.
In the following image, the text block is aligned to the top of its parent container, which in this case pushes the text block to the top edge of the image.
Vertically centering a block
To center a block vertically, select the block and click the Center vertically icon in the Layout section of the Style tab.
In the following image, the text block is aligned to the vertical center of its parent container.
Aligning a block to the bottom
To push a block to the bottom of its parent container, select the block and click the Align bottom icon in the Layout section of the Style tab.
In the following image, the text block is aligned to the vertical center of its parent container.
Next steps
If you've read through The Box Model, How Width Affects Layout, Margin and Padding, along with this article, checkout Using Columns to Build Responsively to bring all these responsive building skills together.
Need Expert help?
Submit a project to our partners, BuildQuick, and be matched with a Builder expert.