How to center CardHeader title in Material-UI?

6
votes

How can I place title center on CardHeader (Material-UI)?

I am using Material-UI v0.18.7

Here is my code. I tried with textAlign: 'center' to titleStyle prop but that doesn't work.

const myTheme = {
   cardHeaderStylePref:{
      background: 'linear-gradient(to right bottom, #430089, #82ffa1)',
      color: config.actualWhite,
      height: 30,
      padding: 0
    }
}
<Card>
     <CardHeader
            title={this.props.prefName}
            style={myTheme.cardHeaderStylePref}
            subtitleColor={myTheme.color}
            titleColor={myTheme.color}
            titleStyle={{textAlign: 'center'}}
      >
      </CardHeader>
      <CardText>
            Sample text
      </CardText>
  </Card>
2
reactjsmaterial-ui
try giving display: block to the element's parent. - ishahadathb
You mean to Card? - Hemadri Dasari
yeah, Card. and check if CardHeader has any float applied to it. if it's floated, remove or overwrite the float.As I can't see the styles being applied to the both of the elements it's hard to determine exactly what's wrong. - ishahadathb

2 Answers

6
votes

Use css style textAlign to move title center

style={{ textAlign: 'center' }}
1
votes

Instead of doing inline styling, passing a class name should be a good option.

<CardHeader title="Subscribe" className={classes.heading} />