How can we help you today?

How to Center Design Elements in a Column

This article will demonstrate how to center Design Elements inside a Column using Custom CSS. This is especially helpful when centering Design Elements that do not have the Hot Actions feature, which allows you to control paddings and margins around a Design Element.


BEFORE


before


AFTER


after


TABLE OF CONTENTS


Prerequisites

  • You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
  • You must be a ShortPoint Designer with an active license.

Step-by-step Tutorial

Follow the steps below to learn how to center Design Elements inside a Column:


Step 1: Edit the ShortPoint Web Part

Go to the SharePoint page you want to use and click Edit:


Edit


Close the Toolbox:


close icon


Select the ShortPoint tag:


ShortPoint tag


Edit ShortPoint:


Edit properties icon


Step 2: Edit the Column

Click the EasyPass tag of the Column where the Design Element you want to center is located:


EasyPass tag


NOTEYou can have any Design Element inside the Column. For the purpose of this guide, we’re using the YouTube Design Element.


Select the cogwheel icon:


Cogwheel icon


Step 3: Modify the Alignment

In the Design tab, set the [1] Horizontal alignment to Center and the [2] Vertical alignment to Middle:


horizontal alignment and vertical alignment


Step 4: Add an ID

Click the next icon:


next icon


Go to the Custom CSS tab:


Custom CSS tab


Add an ID name. Make sure to take note of this, as you will need it in the next step. For this guide, we will use center-element as the ID:


ID


Apply your changes:


Apply


Step 5: Copy and modify the code

Copy the Custom CSS code below:


#your-id-here > div > div {
  display: flex; 
  justify-content: center; 
  align-items: center; 
}

Replace your-id-here with the ID you used in Step 4. In our case, our code will look like this:


#center-element > div > div {
  display: flex; 
  justify-content: center; 
  align-items: center; 
}

Step 6: Insert the Code Design Element

Click the plus icon to open the library of Design Elements:


plus icon


Use the search bar to look for Code and select it:


code


Step 7: Paste the code

Paste the code in the CSS field:


css field


Step 8: Disable Sandbox Mode

Go to the Design tab:


Design Tab


Disable Sandbox Mode:


disable Sandbox Mode


Apply your changes:


Apply


Step 9: Save

Click Save once satisfied:


Save


Congratulations! You have successfully centered Design Elements inside a Column.


Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 87 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more