CODEWITHSUNDEEP
reactjsmaterial-ui
Zanam
Zanam

Reputation: 4807

Adding text over image in ReactJS by relative height and width

I am trying the following code using HTML and CSS:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  text-align: center;
  color: white;
}


.top-asad {
color: blue;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
}



</style>
</head>
<body>

<h2>Image Text</h2>
<p>How to place text over an image:</p>

<div class="container">
  <img src="http://www.pngall.com/wp-content/uploads/2016/05/Trollface.png" alt="Snow" style="width:100%;">  
  <div class="top-asad">Top Left</div>  
</div>

</body>
</html>

I am trying to convert the above code to ReactJS using the following:

import React from "react"
import CardMedia from '@material-ui/core/CardMedia';
import { withStyles } from '@material-ui/core/styles';
import CardActionArea from '@material-ui/core/CardActionArea';
import { Card, CardContent } from "@material-ui/core";

const styles = theme => ({
    card: {
        display: 'flex',
      },
      details: {
        display: 'flex',
        flexDirection: 'column',
      },
      content: {
        flex: '1 0 auto',
      },
      cover: {
        width: 151,
      },
      controls: {
        display: 'flex',
        alignItems: 'center',
        paddingLeft: theme.spacing.unit,
        paddingBottom: theme.spacing.unit,
      },
      container: {
        position: 'relative',
        textAlign: 'center',
        color: 'white',
      },
      topasad: {
        color: 'blue',
          position: 'absolute',
          top: '10%',
          left: '50%',
        },

    media: {
        display: 'flex',
        height: 100,
        objectFit: 'contain',
        alignItems: 'left',

    },
  })

function Header(props) {
    const { classes } = props;
    return (  
            <Card className={classes.card}>
                <div className={classes.con}>
                    <CardContent className={classes.content}>
                        <CardMedia
                            component="img"
                            className={classes.media}
                            image="http://www.pngall.com/wp-content/uploads/2016/05/Trollface.png"
                        />


                    </CardContent>

                </div>                
            </Card>        
    )
}

// export default Header
export default withStyles(styles)(Header);

But I have been unable to place the text on top center of image as I have done using basic HTML and CSS. Can someone please help, please note that I am using relative position while placing text in my working HTML and CSS codes?

Edit: I am doing this as a learning exercise. I am seeking an answer using ReactJS and MaterialUI

Upvotes: 2

Views: 8309

Answers (1)

jered
jered

Reputation: 11571

How about just add a div into your header that wraps the <CardMedia>, sets some styles, and includes the text you want to center?

function Header(props) {
    const { classes } = props;
    return (  
            <Card className={classes.card}>
                <div className={classes.con}>
                    <CardContent className={classes.content}>
                      <div style={{position: 'relative'}} >
                        <CardMedia
                            component="img"
                            className={classes.media}
                            image="https://www.w3schools.com/css/img_lights.jpg"
                        />
                        <div style={{
                          position: 'absolute', 
                          color: 'white', 
                          top: 8, 
                          left: '50%', 
                          transform: 'translateX(-50%)'
                        }} >Your text</div>
                      </div>
                    </CardContent>
                </div>                
            </Card>        
    );
}

https://stackblitz.com/edit/react-b7esqk

Result: enter image description here

Of course "Your text" could be whatever you want, including a prop on <Header> or the children of the header component.

Upvotes: 8

Related Questions