ion-card-title text-center

The ion-card-title text-center class is used in Ionic Framework to style the titles inside cards, ensuring they are centered within the card.

Usage

To use the ion-card-title text-center class, simply add it to the HTML element that represents the title of the card. This class can be applied to any HTML element that contains the card title.

<ion-card>
  <ion-card-header>
    <ion-card-title class="ion-card-title text-center">Card Title</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    <!-- Card content goes here -->
  </ion-card-content>
</ion-card>

Styling

The ion-card-title text-center class provides the following CSS styles to the card title:

• Aligns the title text to the center of the card horizontally.
• Centers the title vertically within the card header.

Example

Here's an example of how to use the ion-card-title text-center class to create a card with a centered title:

<ion-card>
  <ion-card-header>
    <ion-card-title class="ion-card-title text-center">Featured Item</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    <img src="item-image.png" alt="Featured Item">
    <p>This is the description of the featured item.</p>
  </ion-card-content>
</ion-card>

In the example above, the ion-card-title text-center class is applied to the ion-card-title element to center the title within the card. You can modify the styles and customize them further according to your requirements.

Remember to include the Ionic Framework CSS in your project for the styles to take effect.

For more information about styling and available classes, refer to the Ionic Framework documentation.