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
- 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; }
Step 6: Insert the Code Design Element
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: