Browser Support

Menu

Tailwind CSS Vertical Align

Vertical alignment determines how content is positioned vertically relative to other content in the same block. Tailwind CSS offers several utility classes to simplify vertical alignment, enabling developers to quickly set properties without writing custom CSS code.

This guide covers the essential vertical align utilities provided by Tailwind CSS. We'll explore their implementation, customization, and application within various scenarios.

Class	Properties	Example
`align-baseline`	`vertical-align: baseline;`	`<div className="align-baseline"></div>`
`align-top`	`vertical-align: top;`	`<div className="align-top"></div>`
`align-middle`	`vertical-align: middle;`	`<div className="align-middle"></div>`
`align-bottom`	`vertical-align: bottom;`	`<div className="align-bottom"></div>`
`align-text-top`	`vertical-align: text-top;`	`<div className="align-text-top"></div>`
`align-text-bottom`	`vertical-align: text-bottom;`	`<div className="align-text-bottom"></div>`
`align-sub`	`vertical-align: sub;`	`<div className="align-sub"></div>`
`align-super`	`vertical-align: super;`	`<div className="align-super"></div>`

Overview of Vertical Align

Baseline Alignment

To align the element with the baseline of its parent content box, use the align-baseline class.

This is a live editor. Play around with it!

export default function BaselineAlign() {
return (
  <div className="h-screen w-screen flex items-center justify-center bg-gray-100">
    {/* Corresponds to CSS: vertical-align: baseline; */}
    <p>This text has a <span className="align-baseline">Baseline</span> alignment</p>
  </div>
  );
}

Top Alignment

To align the element at the top of the container, use the align-top class.

This is a live editor. Play around with it!

export default function AlignTop() {
return (
  <div className="h-screen w-screen flex items-center justify-center bg-gray-100">
    {/* Corresponds to CSS: vertical-align: top; */}
    <p>This text has a <span className="align-top">Top</span> alignment</p>
  </div>
  );
}

Middle Alignment

To align the element at the middle of the container, use the align-middle class.

This is a live editor. Play around with it!

export default function AlignMiddle() {
return (
  <div className="h-screen w-screen flex items-center justify-center bg-gray-100">
    {/* Corresponds to CSS: vertical-align: middle; */}
    <p>This text has a <span className="align-middle">Middle</span> alignment</p>
  </div>
  );
}

Bottom Alignment

To align the element at the bottom of the container, use the align-bottom class.

This is a live editor. Play around with it!

export default function AlignBottom() {
return (
  <div className="h-screen w-screen flex items-center justify-center bg-gray-100">
    {/* Corresponds to CSS: vertical-align: bottom; */}
    <p>This text has a <span className="align-bottom">Bottom</span> alignment</p>
  </div>
  );
}

Text-Top Alignment

For aligning elements to the top of the parent's font, use align-text-top.

This is a live editor. Play around with it!

export default function AlignTextTop() {
return (
  <div className="h-screen w-screen flex items-center justify-center bg-gray-100">
    {/* Corresponds to CSS: vertical-align: text-top; */}
    <p>This text has a <span className="align-text-top">Text Top</span> alignment</p>
  </div>
  );
}

Text-Bottom Alignment

Similarly, to align elements to the bottom of the parent's font, use align-text-bottom.

This is a live editor. Play around with it!

export default function AlignTextBottom() {
return (
  <div className="h-screen w-screen flex items-center justify-center bg-gray-100">
    {/* Corresponds to CSS: vertical-align: text-bottom; */}
    <p>This text has a <span className="align-text-bottom">Text Bottom</span> alignment</p>
  </div>
  );
}

States and Responsiveness

Hover and Focus States

Tailwind allows you to conditionally apply vertical align on certain states like hover and focus. Use Tailwind's state modifiers like- hover, focus, etc. to apply the utility only when these states are active, e.g., hover:align-middle.

This is a live editor. Play around with it!

export default function HoverAlign() {
return (
  <div className="h-screen w-screen flex items-center justify-center bg-gray-100">
    <p>Hover on <span className="hover:align-text-bottom">"Text Bottom"</span> to change the alignment</p>
  </div>
  );
}

Breakpoint Modifiers

Tailwind CSS provides breakpoint modifiers to conditionally apply vertical align only when the screen hits the defined breakpoint. This is especially helpful for applying effects only on specific screens. Use Tailwind's breakpoint modifiers like- sm, md, etc., to apply the utility only on these breakpoints and above.

This is a live editor. Play around with it!

export default function ResponsiveAlign() {
return (
  <div className="h-screen w-screen flex items-center justify-center bg-gray-100 text-center">
    <p>The <span className="md:align-text-bottom">"Text Bottom"</span> alignment changes on md breakpoint</p>
  </div>
  );
}

Custom Vertical Align

Using Arbitrary Values

To define one-off values directly in your classes, use arbitrary values. Just use the square bracket syntax [value] wherever you need it, e.g., align-[5px].

This is a live editor. Play around with it!

export default function ArbitraryVerticalAlign() {
return (
  <div className="h-screen w-screen flex items-center justify-center bg-gray-100 text-center">
    <p>This text uses <span className="align-[9px]">"arbitrary"</span> alignment</p>
  </div>   
  );
}

Real World Examples

Product Rating Card

A product rating component showing user reviews with vertically aligned star ratings and review text.

This is a live editor. Play around with it!

const ProductRating = () => {
  const reviews = [
    {
      id: 1,
      user: "Sarah M.",
      rating: 5,
      text: "Absolutely love this product!",
      date: "2024-02-10",
      avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330"
    },
    {
      id: 2,
      user: "Michael R.",
      rating: 4,
      text: "Great quality for the price",
      date: "2024-02-09",
      avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e"
    },
    {
      id: 3,
      user: "Emma L.",
      rating: 5,
      text: "Exceeded my expectations",
      date: "2024-02-08",
      avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80"
    },
    {
      id: 4,
      user: "David K.",
      rating: 3,
      text: "Good but could be better",
      date: "2024-02-07",
      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e"
    },
    {
      id: 5,
      user: "Lisa P.",
      rating: 5,
      text: "Perfect purchase decision",
      date: "2024-02-06",
      avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb"
    },
    {
      id: 6,
      user: "James T.",
      rating: 4,
      text: "Highly recommended!",
      date: "2024-02-05",
      avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d"
    }
  ];

  return (
    <div className="w-full max-w-sm mx-auto bg-white rounded-lg shadow p-4">
      <h3 className="text-lg font-semibold mb-4">Customer Reviews</h3>
      <div className="space-y-4">
        {reviews.map((review) => (
          <div key={review.id} className="flex items-start space-x-3">
            <img
              src={review.avatar}
              alt={review.user}
              className="w-10 h-10 rounded-full"
            />
            <div className="flex-1">
              <div className="flex items-center">
                <p className="font-medium">
                  {review.user}
                  <span className="align-middle text-yellow-400 ml-2">
                    {"★".repeat(review.rating)}
                  </span>
                  <span className="align-text-bottom text-gray-400 text-xs ml-2">
                    {review.date}
                  </span>
                </p>
              </div>
              <p className="text-sm text-gray-600 mt-1">{review.text}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ProductRating;

Team Member Directory

A team directory component with vertically aligned member information and status indicators.

This is a live editor. Play around with it!

const TeamDirectory = () => {
  const teamMembers = [
    {
      id: 1,
      name: "Alex Chen",
      role: "Lead Designer",
      status: "In Meeting",
      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      department: "Design",
      location: "San Francisco"
    },
    {
      id: 2,
      name: "Maria Garcia",
      role: "Frontend Developer",
      status: "Available",
      avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      department: "Engineering",
      location: "New York"
    },
    {
      id: 3,
      name: "John Smith",
      role: "Product Manager",
      status: "Away",
      avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      department: "Product",
      location: "London"
    },
    {
      id: 4,
      name: "Sarah Lee",
      role: "UX Researcher",
      status: "Available",
      avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      department: "Design",
      location: "Toronto"
    },
    {
      id: 5,
      name: "Mike Johnson",
      role: "Backend Developer",
      status: "Busy",
      avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      department: "Engineering",
      location: "Berlin"
    },
    {
      id: 6,
      name: "Emma Wilson",
      role: "Content Strategist",
      status: "Available",
      avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      department: "Marketing",
      location: "Sydney"
    }
  ];

  const getStatusColor = (status) => {
    switch (status) {
      case "Available":
        return "bg-green-500";
      case "Away":
        return "bg-yellow-500";
      case "Busy":
        return "bg-red-500";
      default:
        return "bg-gray-500";
    }
  };

  return (
    <div className="w-full max-w-sm mx-auto bg-white rounded-lg shadow p-4">
      <h3 className="text-lg font-semibold mb-4">Team Directory</h3>
      <div className="divide-y">
        {teamMembers.map((member) => (
          <div key={member.id} className="py-3">
            <div className="flex items-center space-x-3">
              <img
                src={member.avatar}
                alt={member.name}
                className="w-10 h-10 rounded-full"
              />
              <div className="flex-1">
                <p className="font-medium">
                  {member.name}
                  <span className="align-middle text-xs text-gray-500 ml-2">
                    {member.department}
                  </span>
                </p>
                <p className="text-sm text-gray-600">
                  {member.role}
                  <span className="align-text-top text-xs ml-2">
                    {member.location}
                  </span>
                </p>
              </div>
              <div className="flex items-center">
                <span className={`w-2 h-2 rounded-full ${getStatusColor(member.status)}`} />
                <span className="text-xs text-gray-500 ml-2 align-middle">
                  {member.status}
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default TeamDirectory;

Notification Center

A notification component with different types of alerts and vertically aligned icons and text.

This is a live editor. Play around with it!

const NotificationCenter = () => {
  const notifications = [
    {
      id: 1,
      type: "message",
      title: "New Message",
      description: "Sarah sent you a message",
      time: "2 min ago",
      icon: "https://images.unsplash.com/photo-1572059002053-8cc5ad2f4a38"
    },
    {
      id: 2,
      type: "alert",
      title: "System Alert",
      description: "Server maintenance scheduled",
      time: "10 min ago",
      icon: "https://images.unsplash.com/photo-1584824486509-112e4181ff6b"
    },
    {
      id: 3,
      type: "update",
      title: "Update Available",
      description: "New version 2.0 is ready",
      time: "1 hour ago",
      icon: "https://images.unsplash.com/photo-1584824486516-0555a07fc511"
    },
    {
      id: 4,
      type: "reminder",
      title: "Meeting Reminder",
      description: "Team standup in 15 minutes",
      time: "15 min ago",
      icon: "https://images.unsplash.com/photo-1634245481935-1a496162ae15"
    },
    {
      id: 5,
      type: "mention",
      title: "New Mention",
      description: "Alex mentioned you in a comment",
      time: "30 min ago",
      icon: "https://images.unsplash.com/photo-1516321318423-f06f85e504b3"
    },
    {
      id: 6,
      type: "security",
      title: "Security Alert",
      description: "New login from unknown device",
      time: "5 min ago",
      icon: "https://images.unsplash.com/photo-1496368077930-c1e31b4e5b44"
    }
  ];

  const getTypeStyles = (type) => {
    switch (type) {
      case "message":
        return "bg-blue-100 text-blue-800";
      case "alert":
        return "bg-red-100 text-red-800";
      case "update":
        return "bg-green-100 text-green-800";
      case "reminder":
        return "bg-yellow-100 text-yellow-800";
      case "mention":
        return "bg-purple-100 text-purple-800";
      default:
        return "bg-gray-100 text-gray-800";
    }
  };

  return (
    <div className="w-full max-w-sm mx-auto bg-white rounded-lg shadow p-4">
      <h3 className="text-lg font-semibold mb-4">Notifications</h3>
      <div className="space-y-3">
        {notifications.map((notification) => (
          <div
            key={notification.id}
            className={`p-3 rounded-lg ${getTypeStyles(notification.type)}`}
          >
            <div className="flex items-start space-x-3">
              <img
                src={notification.icon}
                alt=""
                className="w-8 h-8 rounded"
              />
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium">
                  {notification.title}
                  <span className="align-middle text-xs opacity-75 ml-2">
                    {notification.time}
                  </span>
                </p>
                <p className="text-sm">
                  {notification.description}
                  <span className="align-text-bottom text-xs ml-2">
                    #{notification.type}
                  </span>
                </p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default NotificationCenter;

A comment section showing user interactions with vertically aligned avatars and text elements.

This is a live editor. Play around with it!

const SocialComments = () => {
  const comments = [
    {
      id: 1,
      user: "Sarah Chen",
      avatar: "https://images.unsplash.com/photo-1544005313-94ddf0286df2",
      comment: "This is a fantastic post! Really helped me understand the concept better.",
      time: "2h ago",
      likes: 24,
      replies: 3
    },
    {
      id: 2,
      user: "Mike Johnson",
      avatar: "https://images.unsplash.com/photo-1547425260-76bcadfb4f2c",
      comment: "Great insights! Looking forward to more content like this.",
      time: "3h ago",
      likes: 18,
      replies: 2
    },
    {
      id: 3,
      user: "Emma Wilson",
      avatar: "https://images.unsplash.com/photo-1554151228-14d9def656e4",
      comment: "Thanks for sharing these valuable tips!",
      time: "4h ago",
      likes: 15,
      replies: 1
    },
    {
      id: 4,
      user: "Alex Thompson",
      avatar: "https://images.unsplash.com/photo-1552058544-f2b08422138a",
      comment: "This changed my perspective completely.",
      time: "5h ago",
      likes: 12,
      replies: 4
    },
    {
      id: 5,
      user: "Lisa Wang",
      avatar: "https://images.unsplash.com/photo-1598550874175-4d0ef436c909",
      comment: "Excellent analysis! Bookmarking this for later reference.",
      time: "6h ago",
      likes: 9,
      replies: 2
    },
    {
      id: 6,
      user: "David Brown",
      avatar: "https://images.unsplash.com/photo-1599566150163-29194dcaad36",
      comment: "I've been looking for this kind of explanation. Thank you!",
      time: "7h ago",
      likes: 7,
      replies: 1
    }
  ];

  return (
    <div className="w-full max-w-sm bg-white p-4 rounded-lg shadow">
      <h3 className="text-lg font-semibold mb-4">Comments</h3>
      <div className="space-y-4">
        {comments.map((comment) => (
          <div key={comment.id} className="flex items-start gap-3">
            <img
              src={comment.avatar}
              alt={comment.user}
              className="w-8 h-8 rounded-full"
            />
            <div className="flex-1">
              <div className="flex items-center gap-2">
                <span className="font-medium text-sm">{comment.user}</span>
                <p className="text-gray-500 text-xs">
                  <span className="align-middle">•</span>
                  <span className="align-text-bottom ml-1">{comment.time}</span>
                </p>
              </div>
              <p className="text-sm mt-1">{comment.comment}</p>
              <div className="flex items-center gap-4 mt-2">
                <span className="text-xs text-gray-500">
                  {comment.likes} likes
                  <span className="align-middle mx-1">•</span>
                  {comment.replies} replies
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default SocialComments;

Price Comparison Table

A table comparing different pricing tiers with vertically aligned elements.

This is a live editor. Play around with it!

const PriceComparison = () => {
  const plans = [
    {
      id: 1,
      name: "Basic",
      price: "$9",
      period: "/month",
      description: "Perfect for starters",
      features: [
        "2 Team Members",
        "1GB Storage",
        "Basic Support",
        "2 Projects",
        "Email Notifications",
        "Basic Analytics"
      ],
      popular: false
    },
    {
      id: 2,
      name: "Pro",
      price: "$19",
      period: "/month",
      description: "For growing teams",
      features: [
        "5 Team Members",
        "10GB Storage",
        "Priority Support",
        "10 Projects",
        "SMS Notifications",
        "Advanced Analytics"
      ],
      popular: true
    },
    {
      id: 3,
      name: "Enterprise",
      price: "$49",
      period: "/month",
      description: "For large organizations",
      features: [
        "Unlimited Members",
        "100GB Storage",
        "24/7 Support",
        "Unlimited Projects",
        "Custom Notifications",
        "Custom Analytics"
      ],
      popular: false
    }
  ];

  return (
    <div className="w-full max-w-sm p-4 bg-gray-50">
      <h3 className="text-lg font-semibold mb-4">Choose Your Plan</h3>
      <div className="space-y-4">
        {plans.map((plan) => (
          <div 
            key={plan.id} 
            className={`bg-white p-4 rounded-lg shadow-sm ${
              plan.popular ? 'ring-2 ring-blue-500' : ''
            }`}
          >
            <div className="flex items-center justify-between mb-2">
              <p className="font-medium">
                {plan.name}
                {plan.popular && (
                  <span className="align-text-top text-xs text-blue-500 ml-2">
                    Popular
                  </span>
                )}
              </p>
              <p className="text-right">
                <span className="text-xl font-bold">{plan.price}</span>
                <span className="align-middle text-gray-500 text-sm">
                  {plan.period}
                </span>
              </p>
            </div>
            <p className="text-sm text-gray-600 mb-3">{plan.description}</p>
            <ul className="space-y-2">
              {plan.features.map((feature, index) => (
                <li key={index} className="flex items-center text-sm">
                  <span className="align-text-bottom text-green-500 mr-2">✓</span>
                  {feature}
                </li>
              ))}
            </ul>
            <button className={`w-full mt-4 py-2 px-4 rounded-lg text-sm font-medium ${
              plan.popular 
                ? 'bg-blue-500 text-white hover:bg-blue-600' 
                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
            }`}>
              Select Plan
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default PriceComparison;

Best Practices

Maintain Design Consistency

Applying vertical align utilities in Tailwind CSS should be guided by a consistent design approach to maintain uniformity across the project. Consistency ensures that all elements align properly across different sections, making the UI feel structured and consistent.

When using align-top, align-middle, or align-bottom, ensure that they follow a predictable pattern throughout your layout, especially in table cells, flex items, and inline elements. Keeping vertical alignment uniform across typography, buttons, and media components also enhances readability and aesthetics.

Accessibility Considerations

Enhance Readability and Navigability

Proper vertical alignment contributes significantly to text readability and content organization. Misaligned elements can make it difficult for users to scan and comprehend information effectively. When aligning text alongside images or icons, ensure that the alignment supports natural reading flow and does not create unnecessary visual clutter.

For longer blocks of text, it’s best to ensure that line heights (leading-*) complement the vertical alignment to maintain comfortable spacing between lines.

Focus on High Contrast

While vertical alignment affects content positioning, it can also influence contrast ratios by changing the relative positioning of foreground and background elements. For instance, misaligned text over a background image may inadvertently reduce contrast, making it harder to read.

Ensure that text elements remain within high-contrast zones to enhance legibility, especially for users with visual impairments. Pairing align-* utilities with background contrast utilities like bg-opacity-* or bg-gradient-* can further improve visibility.

Content Word Break