0

I'm trying to add a button in the center in React using Functional component, but the button doesn't move to center. It's a simple task where I need to create a design.

//index.js
import React from 'react'
import ReactDOM from 'react-dom'


const subscribe = 'SUBSCRIBE'


const headerStyles = {
  textAlign: 'center',
}

const Header = () => (
  <header style={headerStyles}>
    <div className='header-wrapper'>
      <h2>{subscribe}</h2>
    </div>
  </header>
)

const mainStyles = {
  textAlign: 'center',
  padding: '10px 20px',
}

const Main = () => (
  <main style={mainStyles}>
    <div className='main-wrapper'>
      <p>
        Sign up with your email address to receive news and updates
      </p><br></br><br></br>
      <input name="firstname" placeholder="First name" />
      <input name="lastname" placeholder="Last name" />
      <input name="email" placeholder="Email" />
    </div>
  </main>
)

const buttonStyles = {
  padding: '8px 50px',
  background: 'rgb(255, 140, 0',
  border: 'none',
  borderRadius: 5,
  justifyContent: "center",
  display: 'flex',
  alignItems: 'center',
}

const Button = () => <button style={buttonStyles}> Subscribe </button>  

const App = () => (
  <div className='app'>
    <Header />
    <Main />
    <Button />
  </div>
)

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

I tried to use justifyContent: "center", display: 'flex', alignItems: 'center', but still without success.

egemenakturk
  • 365
  • 1
  • 17
CrisV2
  • 3
  • 3
  • Hi Chris, Can you give justifyContent: "center", display: 'flex', alignItems: 'center', these to the div instead of button – egemenakturk Feb 22 '23 at 12:44
  • This is a css question. margin: 0 auto, or display: flex and align-items: center etc.. – Steve Tomlin Feb 22 '23 at 12:44
  • Does this answer your question? [align button right reactjs](https://stackoverflow.com/questions/56202758/align-button-right-reactjs) – DSDmark Feb 22 '23 at 12:53

2 Answers2

1

 
.btn1 {

  /*this will make the button center aligned*/
  display: block;
  margin: 0 auto;
  
  padding: 8px 50px;
  background: rgb(255, 140, 0);
  border: none;
  border-radius: 5px;
}

.btn2 {
  padding: 8px 50px;
  background: rgb(255, 140, 0);
  border: none;
  border-radius: 5px;
  margin-top: 5px;
}

/* center item using flex */

div {
  display: flex;
  justify-content: center;
}
<button class="btn1">Button</button>

<div>
<button class="btn2">Button</button>
</div>

I do it in 2 ways using vanilla css:

  1. Using css margin property-> {margin: 0 auto;}

it works fine for block elements, because block elements generally takes full width available. As button is an inline element, we have to make button {display: block}.

  1. Using flex. But in this case button has to be taken as a child and use the flex property to the parent as shown in the example.
deepToe
  • 11
  • 2
0

You only need to apply these styles to the container that wraps around the button. Like this:

const buttonWrapperStyles = {
  padding: '8px 50px',
  background: 'rgb(255, 140, 0)',
  border: 'none',
  borderRadius: 5,
}

const buttonStyles = {
  display: 'flex',
  justifyContent: 'center',
  marginTop: 20,
}

const Button = () => (
  <div style={buttonStyles}>
    <button style={buttonWrapperStyles}>Subscribe</button>
  </div>
);
DSDmark
  • 1,045
  • 5
  • 11
  • 25
  • giving buttonWrapperStyles to button and buttonStyles to div that wrap button a little bit weird but its correct solution :D – egemenakturk Feb 22 '23 at 12:47
  • For just explanation, it's not an solution. it just the example that how you can do that. – DSDmark Feb 22 '23 at 12:51
  • Can somebody explain me a little bit the solution? And why we need to separate them? – CrisV2 Feb 22 '23 at 13:14
  • @CrisV2 button lays on div and the css's u give (justifyContent, display) are div css's. You are making flex centered div and then you put button on that div. – egemenakturk Feb 23 '23 at 08:58