What is the best way to center my image both vertically and horizontally?

Utilizing react.js to develop a template website has been my current project.

The issue arose when I began constructing the first component of the site.

The dilemma:

The picture was not centered on the page, neither vertically nor horizontally.

Despite using CSS flex to center it, the picture still remained off-center.

Why is the position of my picture not in alignment with the middle of the page?

All I want is for that picture to be inside that circle. How can I accomplish this?

Below is my Center.js code snippet:

 import React from 'react';
 import image from './images/5.png'
 import './Center.css';

 const Center = () =>{
     return(
          <div id="center2">
             <img  id="center" alt="center" src={image}/>
          </div>
     );
   }

   export default Center

Here's how my app.js looks like:

   import React, { Component } from 'react';
   import Center from './Components/Center';

   class App extends Component {
  render() {
    return (
     <div>
         <Center/>
      </div>
    );
  }
 }

export default App;

This is what my center.css file contains:

#center2{
text-align:center;
}
#center{
  width:300px;
  height:300px;
}

View of my webpage running on localhost 3000:

https://i.sstatic.net/eVSGq.png

Answer №1

If your images are static, you'll need to import them:

import image from './images/5.png'

return (
    <div id='center'>
        <img src={image} />
    </div>
)

If they are not static, move the images folder to the public directory and access the image like this:

<div id='center'>
    <img src='./images/5.png' />
</div>

To center the image using CSS, use the following code:

#center2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Removing data from local storage using the splice method will consistently result in the deletion of the last element

import React, { useEffect, useState } from "react"; // import styles from "./home.module.css"; import { v4 as uuidv4 } from "uuid"; const Home = () => { let itemArray = localStorage.getItem("value") ? JSON. ...

Jenkins encountered an issue with the React build process, generating the following error message: "build-js" exited with code

Currently in the process of transferring my local Jenkins to a new EC2 instance and while moving the UI build pipeline, I encountered an error: ERROR: "build-js" exited with 1. This same error occurred on the existing Jenkins server but was res ...

Using 'settingsToggleClassName' in Griddle: A Step-by-Step Guide

When using the settingsToggleClassName, it's important to provide a string input. To implement this feature, I have created the following style: let griddleBtnStyle = { background: 'red' }; I am then using this style as follows: <Gri ...

What steps can I take to resolve the spawn unknown error when using npx create-next-app in Visual Studio Code (VSCode)?

Every time I attempt to create a new app using either vscode or cmd, I encounter a spawn unknown error. The error message says "Aborting installation. Unexpected error. Please report it as a bug: Error: spawn UNKNOWN". Unfortunately, the installation abo ...

When attempting to create a react app, I encounter difficulties using the npx create-react-app command

view image here I've attempted various solutions to fix the issue, such as deleting and reinstalling the node, but no matter what I do, it always ends up like this. I also tried removing node modules and reinstalling React, yet the problem persists. ...

What is the best way to remove the empty space on the right side of a webpage while ensuring it remains responsive?

I noticed that there seems to be some extra space on the right side of the layout. I'm not sure how to adjust the Bootstrap code or CSS to fix this issue, or if I need to apply margin 0 or padding 0 somewhere in the code. * { box-sizing: border-b ...

What are some best practices for implementing responsive design using CSS @media queries with makeStyles in React.js Material UI?

const useStyles = makeStyles(theme => ({ wrapper: { width: "300px" }, text: { width: "100%" }, button: { width: "100%", marginTop: theme.spacing(1) }, select: { width: "100%", marginTop: theme.spacing(1) } })); I ...

Step-by-step tutorial on designing an input slider to dynamically adjust the CSS :before linear-gradient values

Is there a way to achieve a gradient effect using pseudo-element :before on an image that can be customized by adjusting a slider input? I've been trying to implement this feature with the following code, but have not been successful so far. var ...

Align title text to the right within the Material Design Card

I have implemented a Material Design (MDL) card to showcase numeric values in the title. However, I am facing an issue where the values are left aligned by default and I want them to be right aligned. Despite trying various styles, they are being ignored ...

I attempted to link MongoDB to my server, only to encounter the error that was displayed

Error: variable 'client' is not defined on line 21 of index.js file at run (C:\Users\DELOWAR\Desktop\Assignment 11\inventory-management-server\index.js:21:5) at Object.<anonymous> (C:\Users\DE ...

Simple 3-column grid design in HTML and CSS

My task is to design a 3-grid layout that resembles the following structure: ------------------------------------- | Image | The name of logo | > | ------------------------------------- I attempted this using the code below: <div class=" ...

Anyone able to solve this mysterious CSS alignment problem?

I have a search bar with two image buttons on a webpage I designed using ASP.NET. When I view the page in Internet Explorer 8, Google Chrome or Opera, I noticed that the textbox and image buttons are not aligned properly. The buttons seem to be positioned ...

Having trouble closing my toggle and experiencing issues with the transition not functioning properly

Within my Next.js project, I have successfully implemented a custom hook and component. The functionality works smoothly as each section opens independently without interfering with others, which is great. However, there are two issues that I am facing. Fi ...

Tips for eliminating white frames or borders on the Mapbox canvas map

In my current project using Angular 10, I have integrated Mapbox to display path routes. Following the standard Angular practice of splitting components, I separated the map rendering component and called it into the main map component. However, I encounte ...

The HTML width of 100% extends beyond the boundaries of the page

Having limited experience with HTML and CSS, I'm encountering an issue with setting the width to 100%. It seems to exceed the browser borders. Can someone check out the example below? Should I slightly decrease the width percentage, or could there be ...

What are the benefits of using material-ui@next without the need for

Thinking about creating a project using material-ui@next, but trying to avoid using withStyles. However, encountering issues with the draft of TypeScript that includes the decorator @withStyles. This leads to one question - is it possible to use material ...

Disable a tab or menu item if the bean's boolean value is 'false'

I designed a home page with various menu/tab options that redirect the user when clicked, but only if they have access to that specific item. If access is not granted, the menu item becomes unclickable. While this functionality works, I am interested in en ...

Sleek carousel design with optimal spacing between images

Solving the Issue Utilizing Ken Wheeler's Slick plugin has allowed me to create a carousel on my website. However, I've encountered an issue where the images inside the <a> tag aren't evenly spaced and are even overlapping in some ins ...

Exploring and navigating a div containing image tags with dynamic data visualization capabilities in d3

I'm using d3 to implement zoom and pan functionality for a div element that contains multiple img tags. Although I have a rough idea of how it works, I need more clarity on the mathematical calculations and library functions required to recalculate co ...

Align the middle element in a dynamic row

There is a row consisting of three elements: left, center, and right. However, the problem lies in the fact that the center element is not aligned at the screen level, but rather at the row level. Is there a solution to align this element at the screen l ...