Position the Button in the Center between Borders using CSS and MUI

Question

Position the Button in the Center between Borders using CSS and MUI

I'm trying to center a button just like the one shown in the image below. It needs to be perfectly aligned with the lines. What is the best way to achieve this?

Check out the example on Codesandbox

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

<MainContainer>
      <Stack spacing={1}>
        <Card sx={{ minWidth: 275 }}>
          <CardContent>
            <Typography
              sx={{ fontSize: 14 }}
              color="text.secondary"
              gutterBottom
            >
              Word of the Day
            </Typography>
            <Typography variant="h5" component="div">
              be{bull}nev{bull}o{bull}lent
            </Typography>
            <Typography sx={{ mb: 1.5 }} color="text.secondary">
              adjective
            </Typography>
            <Typography variant="body2">
              well meaning and kindly.
              <br />
              {'"a benevolent smile"'}
            </Typography>
          </CardContent>
        </Card>
      </Stack>
      <Stack justifyContent={"center"} alignItems={"center"}>
        <Button variant="contained" color="primary" sx={{ maxWidth: 50 }}>
          Hello
        </Button>
      </Stack>
    </MainContainer>

css reactjs material-ui

Answer 1

Answer №1

experiment

<Button variant="contained" color="primary" sx={{ maxWidth: 50, margin: '0 auto' }}>

Take note of the margin: '0 auto' CSS property. It functions effectively on the incredibly useful code sandbox platform.

Answer 2

experiment

<Button variant="contained" color="primary" sx={{ maxWidth: 50, margin: '0 auto' }}>

Take note of the margin: '0 auto' CSS property. It functions effectively on the incredibly useful code sandbox platform.

Answer 3

Answer №2

To position it in the middle, use this: align-items: center

<Stack justifyContent={"center"}>
  <Button variant="contained" color="primary" sx={{ maxWidth: 50 }}>
    Hello
  </Button>
</Stack>

revise as follows:

<Stack alignItems={"center"}>
  <Button variant="contained" color="primary" sx={{ maxWidth: 50 }}>
    Hello
  </Button>
</Stack>

alternatively, you can utilize both: justifyContent, alignItems

Answer 4

To position it in the middle, use this: align-items: center

<Stack justifyContent={"center"}>
  <Button variant="contained" color="primary" sx={{ maxWidth: 50 }}>
    Hello
  </Button>
</Stack>

revise as follows:

<Stack alignItems={"center"}>
  <Button variant="contained" color="primary" sx={{ maxWidth: 50 }}>
    Hello
  </Button>
</Stack>

alternatively, you can utilize both: justifyContent, alignItems

Answer 5

Answer №3

To adjust the position of the button, consider giving it a negative marginTop (mt) value.

import { Stack, Card, CardContent, Typography, Button } from "@mui/material";
import "./styles.css";

export default function App() {
  const bull = "*";
  return (
    <div className="App">
      <Stack spacing={2}>
        <Card sx={{ minWidth: 275 }}>
          <CardContent>
            <Typography
              sx={{ fontSize: 14 }}
              color="text.secondary"
              gutterBottom
            >
              Word of the Day
            </Typography>
            <Typography variant="h5" component="div">
              be{bull}nev{bull}o{bull}lent
            </Typography>
            <Typography sx={{ mb: 1.5 }} color="text.secondary">
              adjective
            </Typography>
            <Typography variant="body2">
              well meaning and kindly.
              <br />
              {'"a benevolent smile"'}
            </Typography>
          </CardContent>
        </Card>
      </Stack>
      <Stack justifyContent={"center"} alignItems={"center"}>
        <Button
          variant="contained"
          color="primary"
          sx={{ maxWidth: 50, mt: -2.5 }}
        >
          Hello
        </Button>
      </Stack>
    </div>
  );
}

For a demonstration, check out this Codesandbox demo.

Source: How to overlap buttons in div tag using css

Answer 6

To adjust the position of the button, consider giving it a negative marginTop (mt) value.

import { Stack, Card, CardContent, Typography, Button } from "@mui/material";
import "./styles.css";

export default function App() {
  const bull = "*";
  return (
    <div className="App">
      <Stack spacing={2}>
        <Card sx={{ minWidth: 275 }}>
          <CardContent>
            <Typography
              sx={{ fontSize: 14 }}
              color="text.secondary"
              gutterBottom
            >
              Word of the Day
            </Typography>
            <Typography variant="h5" component="div">
              be{bull}nev{bull}o{bull}lent
            </Typography>
            <Typography sx={{ mb: 1.5 }} color="text.secondary">
              adjective
            </Typography>
            <Typography variant="body2">
              well meaning and kindly.
              <br />
              {'"a benevolent smile"'}
            </Typography>
          </CardContent>
        </Card>
      </Stack>
      <Stack justifyContent={"center"} alignItems={"center"}>
        <Button
          variant="contained"
          color="primary"
          sx={{ maxWidth: 50, mt: -2.5 }}
        >
          Hello
        </Button>
      </Stack>
    </div>
  );
}

For a demonstration, check out this Codesandbox demo.

Source: How to overlap buttons in div tag using css

Answer 7

Answer №4

To incorporate the horizontal direction, include direction="row" within the stack element. In order to align it with the lower dotted line, you will need to tweak the padding in the root css by eliminating the bottom padding. For example, modify padding: 3 to paddingTop: 3, paddingX: 3,

Answer 8

To incorporate the horizontal direction, include direction="row" within the stack element. In order to align it with the lower dotted line, you will need to tweak the padding in the root css by eliminating the bottom padding. For example, modify padding: 3 to paddingTop: 3, paddingX: 3,

Position the Button in the Center between Borders using CSS and MUI

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to customize the primary Button style in Bootstrap?

React displaying an error indicating that the setTimeout function is undefined?

When the page is resized for mobile, the Bootstrap modal shifts downwards

Is there a way I can turn off the dragging functionality in my situation?

Erase periods from the text box

Is there a way to make a DIV's span equal in height to its inner H3

Align component within material-ui grid

Learn how to achieve a sleek animation similar to the famous "Ken Burns effect" by utilizing the CSS property "transform" instead of "object-position". Check out the demo to see it in action!

What is the purpose of using a visually striking and prominent HTML tag?

Enhance Animation Fluidity with HTML/CSS

Javascript code has been implemented to save changes and address resizing problems

access various paths to distinct iframes

Transitioning to EM-Based Media Queries

As I work on compiling my React project, I am encountering a problem with a module that is not

Unable to iterate through elements when utilizing an external library: Incompatible types, 'Element[]' cannot be assigned to type 'string'

The hover effect in CSS is not altering the entire background

When hovering over items in the navigation bar, the entire bar expands seamlessly

What methods can I use to prevent a number from becoming negative?

The Media Queries in the Wordpress html5blank theme are failing to function properly

Modifying element size using jQuery causes issues with maintaining a 100% height