How to Change the Vertical Alignment of Text Inside Tiles Using Custom CSS

By default, when you use the Tiles Design Element, you can only change the horizontal alignment of text and not the vertical alignment:

This article will demonstrate how to change the vertical alignment of the text inside the Tiles using Custom CSS:

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Copy the Code
  • Step 3: Edit the Tiles Design Element
  • Step 4: Paste the Code
  • Step 5: 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.
• You must already have the Tiles Design Element on your page.

Interactive Tutorial

Copy the code below before starting the tutorial:

.shortpoint-tile-style-sarah .shortpoint-tile-title {
margin-top: 0px;
margin-bottom: 0px;
}

Step-by-step Tutorial

Follow the detailed steps below:

Step 1: Edit the ShortPoint Web Part

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

• Click the cross icon to close the Toolbox:

• Click the ShortPoint tag:

• Select the Edit properties icon:

Step 2: Copy the Code

• Copy the Custom CSS code below:

.shortpoint-tile-style-sarah .shortpoint-tile-title {
margin-top: 0px;
margin-bottom: 0px;
}

NOTEBefore proceeding, ensure you already have a Tiles Design Element on your page. To learn how to add it, check out How to Customize the Tiles Design Element.

• Click the Tiles tag:

• Select the cogwheel icon:

Step 4: Paste the Code

• Click the next icon:

• Navigate to the Custom CSS tab.
• Paste the code in the space provided.
• (Optional) If you’re not using the Sarah Tile Style, you will need to change it. Replace sarah with the tile-style you are using. In our case, we are using bordered so we will replace sarah with that:

• Then, customize the margin-top and/or margin-bottom values according to your preferences:

Step 5: Save

• Once satisfied, click the green check mark.
• Then, click the eye icon to see your page in real time:

• Click Save to apply all your changes:

That’s it! You now know how to change the vertical alignment of text inside the Tiles Design Element.

Related articles:

• How to Change the Font on Tiles Design Elements
• How to Disable the Default Tiles Animation
• How to Create a Border for Tiles Design Element