CODEWITHSUNDEEP
reactjsmaterial-ui
a.kozubenko
a.kozubenko

Reputation: 1060

How to locate text in Paper Material-UI

I tried to make vertical center for Paper from material-ui.

My code is bellow

const style = {
  height: 150,
  width: 150,
  margin: 20,
  textAlign: 'center',
  rounded: true
};


 render () {
    let { currentTime, isRunning } = this.state;
    let stopWatchTime = this.showCorrectTime(currentTime);
    let buttonName = isRunning ? 'Stop' : 'Start';
    let buttonRole = isRunning ? this.stopTime : this.startTime;

    return (
      <div>
        <TextField
          multiLine
          rows={2}
          rowsMax={4}
         />
        <Paper style={style} zDepth={5} circle >{stopWatchTime}</Paper>
        <button onClick={buttonRole}>{buttonName}</button>
      </div>
    );
  }
}

I tried verticalAlign but does not help. Also I did not find options with text in documentation. Please who now, provide info how to centered text inside Paper or info how to work with text in general.

Image with example, what I have now

1

Upvotes: 2

Views: 4285

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104369

Instead of putting the content directly inside Paper, put that inside a div and use css properties to align it properly.

Like this:

<Paper style={style} zDepth={5} circle >
   <div style={{marginTop: '....'}}> 
      {stopWatchTime}
   </div>
</Paper>

Check this example: https://jsfiddle.net/mayankshukla5031/o22jy5hs/

Upvotes: 3

Related Questions