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

AFTER

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Edit the Column
  • Step 3: Modify the Alignment
  • Step 4: Add an ID
  • Step 5: Copy and modify the code
  • Step 6: Insert the Code Design Element
  • Step 7: Paste the code
  • Step 8: Disable Sandbox Mode
  • Step 9: Save

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:

Close the Toolbox:

Select the ShortPoint tag:

Edit ShortPoint:

Step 2: Edit the Column

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

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:

Step 3: Modify the Alignment

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

Step 4: Add an ID

Click the next icon:

Go to the 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:

Apply your changes:

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; 
}

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

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

Step 7: Paste the code

Paste the code in the CSS field:

Step 8: Disable Sandbox Mode

Go to the Design tab:

Disable Sandbox Mode:

Apply your changes:

Step 9: Save

Click Save once satisfied:

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

Related articles:

• How to Create a SharePoint Page with a Side Navigation Menu Using the Code Design Element
• How to Set Up Tabs to Have No Default Selection on Page Load
• How to Insert a Digital Clock into SharePoint Using the ShortPoint Code Design Element