--- title: How to Use Vertical Alignment in Widgets? description: Adjust Vertical Alignment to position content at the top, middle, or bottom of a Row, Container, or Block. Requires extra height for proper alignment. --- [Skip to content](https://success.ministrydesigns.help/how-to-use-vertical-alignment-in-widgets#main-content) English Show submenu for translations [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) [![MD Logo 1\_Black-2](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-2.png?width=200&height=73&name=MD%20Logo%201_Black-2.png)](https://ministrydesigns.com/) Open main navigation Close main navigation - English Show submenu for translations - [Submit a Ticket](https://success.ministrydesigns.help/kb-tickets/new) How can we help you? - There are no suggestions because the search field is empty. 1. [Ministry Designs Success Hub](https://success.ministrydesigns.help/) 2. [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega) 3. [Pages](https://success.ministrydesigns.help/sites-formerly-omega#pages) # How to Use Vertical Alignment in Widgets? ## Control how content is positioned within a widget 1\. **Vertical Alignment** controls how content is positioned vertically within a [**Row**](https://success.ministrydesigns.help/how-to-work-with-a-row-widget), [**Container**](https://success.ministrydesigns.help/container-overview), or [**Block**](https://success.ministrydesigns.help/editing-blocks-overview) (top, middle, bottom, or space between). It only works if there is enough height in the column—such as when **"Adjust to fit the screen height"** is enabled or extra height is added—because there needs to be extra space for the content to shift up or down. Select the Row widget ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2025-03-04/7299340d-2578-4a17-8422-a666611f9923/ascreenshot.jpeg?tl_px=0,0&br_px=982,549&force_format=jpeg&q=100&width=983&wat_scale=87&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=280,212) 2\. Select the "Adjust to Fit the Screen Height" checkbox ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2025-03-04/346ed54b-0703-41d6-b689-dfdabb2728ed/ascreenshot.jpeg?tl_px=932,163&br_px=1915,712&force_format=jpeg&q=100&width=983&wat_scale=87&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=700,228) 3\. Select a Vertical Alignment. The following options are available: - **Top** – Aligns content at the top. - **Middle** – Centers content vertically. - **Bottom** – Aligns content at the bottom. - **Justify (space between)** distributes them with equal space in between without stretching the elements themselves. The Row's content is now vertically aligned to the middle ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2025-03-04/472ba48c-daa9-4695-a283-e93f762b3a82/ascreenshot.jpeg?tl_px=735,164&br_px=1881,805&force_format=jpeg&q=100&width=1120.0&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=954,350) 4\. Click "Save" to confirm the changes ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2025-03-04/4a57d9e5-2908-45cc-9c89-0c388df9993c/ascreenshot.jpeg?tl_px=937,0&br_px=1920,549&force_format=jpeg&q=100&width=983&wat_scale=87&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=892,61) 5\. Some widgets, like [**Counter**](https://success.ministrydesigns.help/how-to-use-the-counter-widget) and [**Circular** **Progress Bar**](https://success.ministrydesigns.help/how-to-use-the-circular-progress-bar-widget), also have **Vertical Alignment** to control how their inner content (like numbers or progress values) is positioned inside the widget itself. Select the middle Vertical Alignment for Before Value ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2025-03-04/637f8a42-a67d-4dc5-8254-f167427bf641/ascreenshot.jpeg?tl_px=937,203&br_px=1920,752&force_format=jpeg&q=100&width=983&wat_scale=87&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=781,243) Vertical Alignment will only work if the values have different Text Style font sizes, so there's plenty of space for them to move around when selecting the alignment 6\. Top Vertical Alignment ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2025-03-04/cc13a1fd-dbe9-4aed-bc3d-7855f887d212/ascreenshot.jpeg?tl_px=937,216&br_px=1920,765&force_format=jpeg&q=100&width=983&wat_scale=87&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=724,243) 7\. Bottom Vertical Alignment ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2025-03-04/a5eeb175-ac72-4f25-9346-efeadff1f1f9/ascreenshot.jpeg?tl_px=937,209&br_px=1920,758&force_format=jpeg&q=100&width=983&wat_scale=87&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=830,243) 8\. Click "Save" to confirm the changes ![](https://ajeuwbhvhr.cloudimg.io/colony-recorder.s3.amazonaws.com/files/2025-03-04/7badb2e5-0113-46f7-a8dd-5230f48af7eb/ascreenshot.jpeg?tl_px=902,0&br_px=1885,549&force_format=jpeg&q=100&width=983&wat_scale=87&wat=1&wat_opacity=0.7&wat_gravity=northwest&wat_url=https://colony-recorder.s3.us-west-1.amazonaws.com/images/watermarks/FB923C_standard.png&wat_pad=899,63) - [Account](https://success.ministrydesigns.help/account) - [Sites (Formerly Omega)](https://success.ministrydesigns.help/sites-formerly-omega#main-content) - [Next-Steps Framework](https://success.ministrydesigns.help/sites-formerly-omega#next-steps-framework) - [Video Guides](https://success.ministrydesigns.help/sites-formerly-omega#video-guides) - [Site Builder Profile Settings](https://success.ministrydesigns.help/sites-formerly-omega#site-builder-profile-settings) - [Pages](https://success.ministrydesigns.help/sites-formerly-omega#pages) - [Design](https://success.ministrydesigns.help/sites-formerly-omega#design) - [Media Library](https://success.ministrydesigns.help/sites-formerly-omega#media-library) - [Extensions](https://success.ministrydesigns.help/sites-formerly-omega#extensions) - [Blog](https://success.ministrydesigns.help/sites-formerly-omega#blog) - [Events](https://success.ministrydesigns.help/sites-formerly-omega#events) - [Small Groups](https://success.ministrydesigns.help/sites-formerly-omega#small-groups) - [Sermons](https://success.ministrydesigns.help/sites-formerly-omega#sermons) - [Settings](https://success.ministrydesigns.help/sites-formerly-omega#settings) - [SEO](https://success.ministrydesigns.help/sites-formerly-omega#seo) - [Website Management](https://success.ministrydesigns.help/sites-formerly-omega#website-management) - [FAQ](https://success.ministrydesigns.help/sites-formerly-omega#faq) - [illume for Church Members](https://success.ministrydesigns.help/illume-for-church-members#main-content) - [Signing Up](https://success.ministrydesigns.help/illume-for-church-members#signing-up) - [Giving](https://success.ministrydesigns.help/illume-for-church-members#giving) - [illume for Church Administration](https://success.ministrydesigns.help/illume-for-church-administration#main-content) - [Getting Started](https://success.ministrydesigns.help/illume-for-church-administration#getting-started) - [Managing Your Account](https://success.ministrydesigns.help/illume-for-church-administration#managing-your-account) - [Using People](https://success.ministrydesigns.help/illume-for-church-administration#using-people) - [Using Giving](https://success.ministrydesigns.help/illume-for-church-administration#using-giving) [![MD Logo 1\_Black-3](https://success.ministrydesigns.help/hs-fs/hubfs/MD%20Logo%201_Black-3.png?width=200&height=73&name=MD%20Logo%201_Black-3.png "MD Logo 1_Black-3")](http://ministrydesigns.com) 15 Carlyle St Floor 2, Battle Creek, Mi 49017 [mailto:email@email.com](mailto:email@email.com) Copyright © 2025,