Button variant alignment cannot be centered

I'm currently working on a React project and facing an issue with aligning my Button variant in the center of the home screen. I've tried various methods but haven't been successful so far. Does anyone have any suggestions or solutions for this?

Here is a snippet of my code:

import React from "react";
import { Link } from "react-router-dom";
import "./App.css";
import Fancyline from "./Fancylines";
import lock from "./lock.png";
import { Typography, Button, Card, Grid } from "@material-ui/core";
import homepage1 from "./homepage1.png";

function Login() {
  return (
    <div
      style={{
        minHeight: "100vh",
        backgroundImage: `url(${homepage1})`,
        backgroundPosition: "center",
        backgroundSize: "cover"
      }}>
    <div style={{
      textAlign:"center",
      verticalAlign:"bottom",
      bottom:"0px"
    }}>
      <Link to="/Language">
        <Button variant="contained" color="secondary" size="large">
          CONTINUE
        </Button>
      </Link>
    </div>
    </div>
  );
}

export default Login;

Answer №1

It appears that Material-ui is being used in your code. To achieve the desired outcome, simply utilize the Material-ui Grid component with the specified props.

<Grid
  container
  direction="row"
  justify="center"
  alignItems="center"
>

Here is what the complete code would look like:

import React from "react";
import { Link } from "react-router-dom";
import "./App.css";
import Fancyline from "./Fancylines";
import lock from "./lock.png";
import { Typography, Button, Card, Grid } from "@material-ui/core";
import Grid from '@material-ui/core/Grid';
import homepage1 from "./homepage1.png";

function Login() {
  return (
    <Grid 
      container
      direction="row"
      justify="center"
      alignItems="center"
    >
      <Link to="/Language">
        <Button variant="contained" color="secondary" size="large">
          CONTINUE
        </Button>
      </Link>
    </Grid>
  );
}

export default Login;

Answer №2

To create a container with flexbox, follow this example:

function LoginForm() {
  return (
    <div
      style={{
        minHeight: "100vh",
        backgroundImage: `url(${homepage1})`,
        backgroundPosition: "center",
        backgroundSize: "cover",
        display: 'flex';               // Flexbox styling here
        flexDirection: 'column';
        justifyContent: 'center';
      }}>
    <div style={{
      textAlign:"center",
      verticalAlign:"bottom",
      bottom:"0px"
    }}>
      <Link to="/Language">
        <Button variant="contained" color="secondary" size="large">
          CONTINUE
        </Button>
      </Link>
    </div>
    </div>
  );
}

Answer №3

To achieve the desired layout, one option is to utilize absolute positioning:

<Button variant="contained" color="secondary" size="large"
           style={{position:"absolute,
           top:"50%",left:"50%",
           transform:"translate(-50%,-50%)"
             }}>
              CONTINUE
            </Button>

Answer №4

Here is the solution I came up with:

function Login() {
  return (
    <div
      style={{
        minHeight: "100vh",
        backgroundImage: `url(${homepage1})`,
        backgroundPosition: "center",
        backgroundSize: "cover",
        display: flex;
        align-items: center;
        justify-content: center;
      }}>
    <div style={{
      textAlign:"center",
      verticalAlign:"bottom",
      bottom:"0px"
    }}>
      <Link to="/Language">
        <Button variant="contained" color="secondary" size="large">
          CONTINUE
        </Button>
      </Link>
    </div>
    </div>
  );
}

You just need to add this to your parent div:

display: flex;
align-items: center;
justify-content: center;

Answer №5

Implement css properties display: flex, align-items: center, and justify-content: center

Check out the CodeSandbox Demo here

function Login() {
  return (
    <div
      style={{
        minHeight: "100vh",
        backgroundImage: `url(${homepage1})`,
        backgroundPosition: "center",
        backgroundSize: "cover",
        display: "flex",
        justifyContent:"center",
        alignItems:"center"
      }}>
    <div style={{
      textAlign:"center",
      verticalAlign:"bottom",
      bottom:"0px"
    }}>
      <Link to="/Language">
        <Button variant="contained" color="secondary" size="large">
          CONTINUE
        </Button>
      </Link>
    </div>
    </div>
  );
}

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

Components drifting apart following viewport adjustments

Can someone help me with this issue in responsiveness? When I change the viewport, my header and main elements seem to be moving far apart from each other. View the code on JSFiddle <header> <div class="slider"> <img src="picture1" al ...

Separate the area into three parallel sections

My expectation was for the li elements inside the ul to be divided into 3 parallel lists of elements appearing next to each other. However, the list is showing up in a straight list. I thought using col-xs-3 would solve the issue, but it doesn't seem ...

Transferring parameters from HTML to CSS using Less and addressing two key design problems

I am currently in the process of designing a webpage, and I've encountered three distinct issues - two are related to pure .css, while one is related to less. Firstly, I have set margin: auto and padding: auto on the body tag, but it's not cente ...

What are some effective ways to ensure the footer stays at the bottom of the page

I managed to successfully position the footer at the bottom of the page, but I noticed that when I resize the screen to fit a phone, especially when there is scrolling on the page, the footer moves up! <footer className="footerContainer"> &l ...

Where is the function returned by redux-thunk invoked?

Can you help me understand where the function returned by addUser is being called in this action creator and redux thunk function? const userAdded = () => ({ type: types.ADD_USER, }); export const addUser = (user) => { return function (dispat ...

Learn the process of creating various themes with Tailwind CSS

When exploring Tailwind CSS, it appears that specific colors need to be specified in classes like this: <div class="bg-yellow-200 dark:bg-gray-800"></div> However, I am interested in offering 10 different themes for users to choose f ...

Why Jquery's nth-child selection and conditional formatting are failing to work

I am working with a table and need to format specific data fields based on their content. For instance, any field less than 95% should be highlighted in red. Below is the jQuery code I am using: $(function(){ $('#ConditionalTable td:nth-child(2n ...

Date selection feature in Material UI causing application malfunction when using defaultValue attribute with Typescript

Recently, I discovered the amazing functionality of the Material UI library and decided to try out their date pickers. Everything seemed fine at first, but now I'm facing an issue that has left me puzzled. Below is a snippet of my code (which closely ...

What is the best way to animate various sprites using distinct buttons in HTML and CSS?

I've been experimenting with animating a sprite by using different onClick button triggers. I encountered an issue where only one of the buttons works correctly in the fiddle. However, in my local file version, the other buttons work but only once and ...

Having trouble with changing the color of an element when the radio input is checked?

Can someone help me troubleshoot this HTML and CSS code? <label class="radio"> <input type="radio" name="plan" value="plan" required> <span> <h6>Plan</h6> <i class="pe-7s-graph1 ...

My custom Material-UI theme created using createMuiTheme() doesn't seem to be functioning properly

When it comes to implementing the custom theme, I have followed the guidelines provided in the official docs. The code snippet is outlined below, however, there seems to be an issue where the text ('Some Text Here') is displaying in an incorrect ...

When executing npm run build, the fonts are not displayed properly in Vite

I'm running 'npm run build' to compile my project, and then I use the 'npm run preview' command to view it. However, some images that I've set as background images in my SCSS file are not showing up. The same issue occurs with ...

Utilizing Next.js named imports without server-side rendering

I am looking to update this code snippet to use next.js dynamic imports without server-side rendering (SSR) import { widget } from "./charting_library/charting_library"; Here is what I have tried so far const widget = dynamic(() => import(&qu ...

What is the reason behind the body element's background styling impacting the entire screen?

Why does styling the background of the body element affect the entire screen instead of just the body itself? For example, consider this CSS rule: body { width: 700px; height:200px; border: 5px dotted red; background-color: blue; } While the ...

Trouble with xhtml2pdf failing to render CSS when converting HTML to PDF

Conversion: html = template.render(context) resultFile = open(filepath, "w+b") pdf = pisa.CreatePDF(html.encode('utf-8'), dest=resultFile,encoding='utf-8', link_callback=link_callback) link_callback def link_callback(uri, rel): s ...

Using JavaScript code to perform a redirect can be done by utilizing the window

When developing my app with react+redux, I initially utilized the this.context.router API for page redirection. However, according to React's official recommendations, using the context API is not necessary. Instead, I began using the history method f ...

The drop-down box options on the web page are not visible to me, but I am able to see them in the element

Having a peculiar issue with two dropdowns on my webpage. The first dropdown works perfectly fine, but when I click on the second dropdown, the options don't show up on the webpage, even though they are visible in the element window. Both dropdowns ha ...

Guide to setting up a subdirectory for an html/php webpage on an Azure Website

Is there a way to customize the URL of my website so it looks like 'https://example.com/mainPage/subPage/anotherSubPage' for a more organized directory structure? I am currently using an Azure web app server and I have been unable to locate the w ...

Is there a way to eliminate the menuArrow from a Select widget in gwt-bootstrap3?

In my current project, using gwt-bootstrap3, I have been attempting to conditionally remove the menu arrow from a Select box. I have experimented with various methods such as: <select:Select ui:field="fieldName" name="fieldName" b:id="fieldName" showM ...

Strategies for resolving ButtonGroup overflow in Material UI Grid container

In an effort to create a responsive layout, I encountered an issue where the button group in my code seems to overflow out of the container and expand when the screen size is reduced. The code below illustrates this problem: <Container className=" ...