Reactjs: есть ли способ центрировать картинку? - PullRequest
Новая
       28

Reactjs: есть ли способ центрировать картинку?

0 голосов
/ 27 июня 2019

Я написал сайт, который вы видите здесь: https://konekto -1var7fhic.now.sh

В данный момент меня беспокоит этот экран: screenshot-Landpage

Я хочу центрировать иконку, много пробовал, но она все равно не работает, потому что я не знаю, как применить к ней стили. Здесь вы можете увидеть мой код: 

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);

Спасибо за вашу помощь!

РЕДАКТИРОВАТЬ: изображение теперь центрируется, но больше не после нажатия «Получить справку сейчас».

Я не понимаю этого, поскольку изменение кнопки осуществляется только в файле кнопки SOS, который не содержит логотип или не манипулирует им: 

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));

Смотрите новый сайт здесь: https://konekto -58wgrs51r.now.sh

Ответы [ 2 ]

1 голос
/ 27 июня 2019

Вам нужно обернуть тег img в его собственный div и соответственно стилизовать этот div. В данном случае я дал div класс imageContainer. Смотрите ниже: 

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);
0 голосов
/ 27 июня 2019

Ваша первая проблема заключается в том, что вам нужно сменить стиль на случай верблюда.Во-вторых, вы просто добавляете flex на экран и выравниваете контент по центру, и он должен центрировать ваше изображение 

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

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