properties
changelog

Align Text

Align text content within element along main-axis and cross-axis.

Usage:

  • @text align-x-*;
  • @text align-y-*;

Reference

shilp.config.js
const shilpConfig = {
	source: "react",

	properties: {
		text: {
			align: {
				x: {
					property: "text-align: <v><i>;",
					values: {
						left: "left",
						right: "right",
						center: "center",
						justify: "justify",
						start: "start",
						end: "end",
					},
				},

				y: {
					property: "vertical-align: <v><i>;",
					values: {
						baseline: "baseline",
						top: "top",
						middle: "middle",
						bottom: "bottom",
						to: {
							top: "text-top",
							bottom: "text-bottom",
						},
						sub: "sub",
						sup: "sup",
					},
				},
			},
		},
	},
};

export default shilpConfig;