Align content to center with variant as caption in Material UI Typography

Question

I have two Typography elements with default and caption variants. How do I center the content with align="center" property with variant as caption as this doesn't seem to work.

  render() {
    return (
      <div>
        <Typography align="center">Centered text</Typography>
        <Typography color="textSecondary" variant="caption" align="center">A Caption!</Typography>
      </div>
    );
  }

I created a working example using StackBlitz. Could anyone please help?

Answer 1

import React from "react";
import Typography from "@material-ui/core/Typography";

export default function DisableElevation() {
  return (
    <div>
      <Typography align="center">Centered text</Typography>
      <Typography
        display="block"
        color="textSecondary"
        variant="caption"
        align="center"
      >
        A Caption!
      </Typography>
    </div>
  );
}