Question 45892 in CSS Question posted in
Some basic documentation can be found here.

Unable to move button to center in CSS

Im trying to center my button in css and I cant figure out how.

Here is my css file:

* {
    margin:0;
    padding: 0;

}

body {
    font-family: "Roboto", sans-serif;
    background: #bef2ff;
}


.nav {  
    background: #4f7097; 
    
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 1rem;;

}

.nav a{
    color: inherit;
    text-decoration: none;
}

.nav ul{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    gap: 1rem;
}

.site-title {
    font-size: 2rem;
}

section{
    margin: 2rem 0 1rem 0;
}

.controls{
    display: flex;
    align-items: center;
    flex-direction: column;
}

input{
    text-align: center;
    padding: 0.5rem;
    margin-bottom: 1rem;
}


button{
    padding: 0.5rem 1rem;
    background: #1bf5af;
    color: rgb(0, 0, 0);
    border: none;
    font-family: "Arial", sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.4s;
    border-radius: 10px;
}


button:hover {
    transform: scale(1.05);
    background-color: rgb(4, 205, 205);
}

.getplan{
    display: flex;
    align-items: center;
    flex-direction: column;
}


main{
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1{
    text-align: center;
    margin-bottom: 2rem;
}

.nutrients ul{
    display: flex;
    width: 35rem;
    justify-content: space-evenly;
}

ul{
    list-style: none;
}

.meals{
    display: flex;
}

img{
    width: 100%;
    margin-bottom: 1rem;
}

article{
    display: flex;
    flex-direction: column;
    padding: 2rem;
    margin: 0 1rem;
    max-width: 18rem;
    box-shadow: 0 4px 8 px 2px rgb(79, 76, 76, 0.15) 
}

.instrucitons{
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

a{
    text-decoration: none;
    color: rgb(0, 0, 0);
    width: fit-content;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: 0.4s;
   
}

a:hover {
    transform: scale(1.05);
    background-color: rgb(4, 205, 205);
}

@media only screen and (max-width: 550px){
    .meals{
        align-items: center;
    }

    .nutrients ul{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
}

a.class1 {
    padding: 0.5rem 1rem;
    background: #1bf5af;
    color: rgb(0, 0, 0);
    border: none;
    font-family: "Arial", sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.4s;
    border-radius: 10px;
}

Here is where the button is used:

    <section className='controls'>
      <input 
      type="number"
      placeholder='Number of Calories'
      onChange={handleChange}/>
    </section>
    <button onClick={getMealData}>Get daily meal plan</button>
    {mealData && <MealList mealData={mealData}/> }
  </div>
    );
}

export default App;

I have tried using flex to get it right but I cant get it to move. I have also gone through 5 different button centering posts on here and none of them have worked for me. Im guessing something else is forcing it to stay where it is.

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

This doesnt work either ^

This is what it currently looks like

Tags:

3

Answers


  1. 0

    You can make your button block (or flex) and use automatic margins.

    button {
    padding: 0.5rem 1rem;
    background: #1bf5af;
    color: rgb(0, 0, 0);
    border: none;
    font-family: "Arial", sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.4s;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}
    <html>
<body>

<div><section className='controls'>
    <input 
      type="number"
      placeholder='Number of Calories'
      onChange={handleChange}/>
    </section>
    <button>Get daily meal plan</button>
  </div>
</body>
</html>
    Login or Signup to reply.
  2. 0

    Put the button in an extra div just like the code below

    <section className='controls'>
  <input 
  type="number"
  placeholder='Number of Calories'
  onChange={handleChange}/>
</section>
<div class="myextradiv">
<button onClick={getMealData}>Get daily meal plan</button>
</div>
{mealData && <MealList mealData={mealData}/> }

    Now add styles to it.
    add this to your css

    .myextradiv {
  display: flex;
  justify-content: center;
}
    Login or Signup to reply.
  3. 0

    I don`t know what is the style of the parent button tag, please send code and CSS for parent button tag;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search