CODEWITHSUNDEEP
cssreactjsimagestyling
pythonlearner
pythonlearner

Reputation: 57

Reactjs: Is there a way to center a picture?

I have written the website you can see here: https://konekto-1var7fhic.now.sh

I am currently worried about this screen: screenshot-landingpage

I want to center the icon, have tried a lot, but it still does not work because I do not know how I can apply styles to it. Here you can see my code:

import React from 'react';
import { Button, Grid } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
import AppContext from '../utils/AppContext';
import { Header } from '../Layout';
import SOSButton from './SOSButton';
import axios from 'axios';
import CONST from '../utils/Constants';
import AmbulanceIcon from '../utils/icons/Ambulance-small.png';
const styles = theme => ({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    // background: 'white',
    border: 'black',
    'border-width': 'medium',
    'margin-top': '80px',
    background: 'rgba(255, 255, 255, 0.8)',
    'border-radius': '20px'
  },
  item: {
    // background: 'red',
    width: '100%',
    //background: 'white',
    'text-align': 'center',
    'border-radius': '5px',
    'margin-top': '10px'
  },
  icon: {
    height: '50px',
    width: '50px'
  }
});

class Landingpage extends React.Component {
  static contextType = AppContext;

  constructor(props) {
    super(props);
    this.classes = props.classes;
    this.state = {};
    this.handleDirectSOS = this.handleDirectSOS.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentDidMount() {
    console.log(this.context);

    if (this.context.onBoardingStatus === false) {
      console.log('IN IF');
      this.props.history.push('/onboarding');
    }
  }
  handleDirectSOS() {
    console.log('direct SOS');
    this.props.history.push('/emergency_sent');
  }

  onSubmit(e) {
    console.log('in OnSubmit');
    axios
      .post(CONST.URL + 'emergency/create', {
        id: 1,
        data: this.state
      })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
      .catch(err => {
        console.log(err);
      });
  }

  render() {
    return (
      <React.Fragment>
        <Header title="Send out SOS" />
        <Grid
          container
          className={this.classes.container}
          direction="column"
          spacing={2}
        >
          <Grid
            item
            sm={12}
            className={(this.classes.item, this.classes.forwardbutton)}
          >
            <div className={this.classes.imageContainer}>
            <img src={AmbulanceIcon} alt="AmbulanceIcon" />{' '}
            </div>
            <SOSButton onSubmit={this.onSubmit} />
          </Grid>
        </Grid>
      </React.Fragment>
    );
  }
}

export default withStyles(styles)(Landingpage);

Thank you for your help!

EDIT: The picture is now centered but not anymore after pressing "Get Help now".

I do not understand this since the change of the button is only managed in the SOS button file which does not contain or manipulate the logo:

import React from 'react';
import { withRouter } from 'react-router-dom';
import Button from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  sosbutton: {
    background: '#e45050',
    'text-align': 'center',
    'margin-top': '30px',
    height: '80%',
    width: '100%'
  }
});
class SOSButton extends React.Component {
  constructor(props) {
    super(props);
    this.classes = props.classes;
    this.state = {
      timerOn: false
    };
    this.timerStart = this.timerStart.bind(this);
    this.timerStop = this.timerStop.bind(this);
    this.tick = this.tick.bind(this);
    this.counter = 3;
    this.counterStep = 1;
  }

  timerStart() {
    this.timerID = setInterval(() => this.tick(), 1000);
    this.setState({ timerOn: true });
  }

  timerStop() {
    clearInterval(this.timerID);
    this.counter = 3;
    this.setState({ timerOn: false });
    this.props.history.push('/');
  }

  tick() {
    this.counter = this.counter - this.counterStep;
    if (this.counter <= 0) {
      this.setState({ timerOn: false });
      this.timerStop();
      this.props.onSubmit();
      this.props.history.push('/emergency_sent');
    } else {
      this.setState({ timerOn: true });
    }
    console.log(this.counter);
  }

  render() {
    let timerOn = this.state.timerOn;
    let button;

    if (timerOn) {
      button = (
        <div>
          You have {this.counter} seconds to cancel the emergency SOS. <br />
          <br />
          <Button size="large" color="primary" onClick={this.timerStop}>
            Press here to cancel emergency call!
          </Button>
        </div>
      );
    } else {
      button = (
        <Button className={this.classes.sosbutton} onClick={this.timerStart}>
          GET HELP NOW!
        </Button>
      );
    }

    console.log(button);
    return button;
  }
}

export default withRouter(withStyles(styles)(SOSButton));

See new website here: https://konekto-58wgrs51r.now.sh

Upvotes: 0

Views: 2940

Answers (2)

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15708

You need to wrap the img tag in its own div and style that div accordingly. In this case, I've given that div a class of imageContainer. See below:

import React from 'react';
import { Button, Grid } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
import AppContext from '../utils/AppContext';
import { Header } from '../Layout';
import SOSButton from './SOSButton';
import axios from 'axios';
import CONST from '../utils/Constants';
import AmbulanceIcon from '../utils/icons/Ambulance-small.png';
const styles = theme => ({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    // background: 'white',
    border: 'black',
    'border-width': 'medium',
    'margin-top': '80px',
    background: 'rgba(255, 255, 255, 0.8)',
    'border-radius': '20px'
  },
  item: {
    // background: 'red',
    width: '100%',
    //background: 'white',
    'textAlign': 'center',
    'borderRadius': '5px',
    'marginTop': '10px'
  },
  icon: {
    height: '50px',
    width: '50px'
  },
  imageContainer: {
    display: 'flex';
    justifyContent: 'center'
    width: '250px'
  }
});

class Landingpage extends React.Component {
  static contextType = AppContext;

  constructor(props) {
    super(props);
    this.classes = props.classes;
    this.state = {};
    this.handleDirectSOS = this.handleDirectSOS.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentDidMount() {
    console.log(this.context);

    if (this.context.onBoardingStatus === false) {
      console.log('IN IF');
      this.props.history.push('/onboarding');
    }
  }
  handleDirectSOS() {
    console.log('direct SOS');
    this.props.history.push('/emergency_sent');
  }

  onSubmit(e) {
    console.log('in OnSubmit');
    axios
      .post(CONST.URL + 'emergency/create', {
        id: 1,
        data: this.state
      })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
      .catch(err => {
        console.log(err);
      });
  }

  render() {
    return (
      <React.Fragment>
        <Header title="Send out SOS" />
        <Grid
          container
          className={this.classes.container}
          direction="column"
          spacing={2}
        >
          <Grid
            item
            sm={12}
            className={(this.classes.item, this.classes.forwardbutton)}
          >
            <div className={this.classes.imageContainer}>
                <img src={AmbulanceIcon} alt="AmbulanceIcon" />{' '}
            </div>
            <SOSButton onSubmit={this.onSubmit} />
          </Grid>
        </Grid>
      </React.Fragment>
    );
  }
}

export default withStyles(styles)(Landingpage);

Upvotes: 1

Brad Ball
Brad Ball

Reputation: 619

Your first problem is that you need to change your styles to camel case. Second you just add display flex and justify content to center and it should center your image 

item: {
    // background: 'red',
    width: '100%',

    //background: 'white',
    textAlign: 'center',
    borderRadius': '5px',
    marginTop: '10px',
    display: "flex",
    justifyContent: "center
  },

Upvotes: 0

Related Questions