javascript - react : How to style a picture to be centered and have a certain maximum size

Question

我开发了以下网站:https://konekto.world/first_use

从网站上可以看出，照片实际上没有居中，而且对于手机来说太大了。正如您在下面的代码中看到的那样，我尝试通过多种方法对其进行对齐，但没有一种方法有效。非常感谢您的帮助!

import React from 'react';
import { Grid } from '@material-ui/core';
import { Header } from '../Layout';
//import logo from '.../public/android-chrome-192x192.png';
import logo from './android-icon-512x512.png';
import { makeStyles, withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  container: {
    alignItems: 'center',
    // background: 'white',
    border: 'black',
    'border-width': 'medium',
    'margin-top': '80px',
    background: 'rgba(255, 255, 255, 0.8)',
    'border-radius': '20px'
  }
});
class FirstUse extends React.Component {
  constructor(props) {
    super(props);
    this.classes = props.classes;
    this.state = {};
  }

  render() {
    return (
      <React.Fragment>
        <Header title="Learn how to send SOS" />
        <Grid
          container
          className={this.classes.container}
          direction="column"
          spacing={2}
          align-content="center"
          align-items-xs-center
          justify-xs-flex-end
          alignItems="flex-start"
          justify="flex-end"
        >
          <Grid
            item
            sm={12}
            className={this.classes.item}
            align-content="center"
            align-items-xs-center
            justify-xs-flex-end
            alignItems="flex-start"
            justify="flex-end"
          >
            <img
              src={logo}
              alt="Logo"
              align-content="center"
              alignItems="flex-start"
              justify="flex-end"
            />
            ;
           </Grid>
        </Grid>
      </React.Fragment>
    );
  }
}

export default withStyles(styles)(FirstUse);

感谢您的帮助!

您提出的两个建议没有帮助，即使以这种方式呈现它仍然是左对齐的(参见 https://konekto-ajtmdbwcg.now.sh/first_use ):

return (
      <React.Fragment>
        <Header title="Learn how to send SOS" />
        <Grid
          container
          className={this.classes.container}
          direction="column"
          spacing={2}
        >
          <Grid item sm={12} className={this.classes.item}>
            <img
              src={logo}
              alt="Logo"
              align-conent="center"
              alignItems="flex-start"
              justify="flex-end"
              maxWidth="50%"
            />
            ;
            <FirstUse1 />
          </Grid>
        </Grid>
      </React.Fragment>
    );

Answer 1

只需删除行

align-content="中心"
alignItems =“灵活开始”
justify="flex-end"

并将以下样式添加到图像中。

显示: block ；
边距:0 自动；