CODEWITHSUNDEEP
javascriptcssreactjs
pythonlearner
pythonlearner

Reputation: 57

React: How to style a picture to be centered and have a certain maximum size

I have developed following website: https://konekto.world/first_use

As you can see from the website, the photo is actually not centered and too big for mobile phones. I tried to align it by several methods as you can see in the code below but none of them worked. I would appreciate your help!

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

Thank you for your help!

The two suggestions you made did not help, it is still left-aligned even when rendering it this way (see 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>
    );

Upvotes: 0

Views: 130

Answers (3)

Cat
Cat

Reputation: 177

The flexbox styles need to be applied to the container that wraps the image. Most flexbox attributes tell the children how to behave inside the parent.

This will center your image:

display: flex;
flex-direction: column;
align-items: center;

Also, just wanted to let you know that you have a rogue ";" floating by your image.

Upvotes: 0

jeninja
jeninja

Reputation: 848

You need to set the maxWidth of the <img /> tag to 100% through using CSS. This will make sure that the image cannot exceed the width of the container that it is currently in.

<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"
        style={maxWidth: 100%};
      />
      ;
    </Grid>
  </Grid>
</React.Fragment>;

Upvotes: 0

Herbert Lago
Herbert Lago

Reputation: 343

Just remove the lines

align-content="center" alignItems="flex-start" justify="flex-end"

and add the following style to the image.

display: block; margin: 0 auto;

Upvotes: 1

Related Questions