Html button not aligning to center in div tag

Fadzii
June 5, 2023
213 views
3 votes
4 Answers

I am creating a website for school and am stuck on a issue that i have looked everywhere for a solution. I am very knew to html and css so i hope im not asking something stupid. I have a row div tag with 2 div tags inside for the 2 columns as this webpage is kinda split in 2. On the column on the right i have a button that wont align to the center of the right column. For the text in that column it aligns in the center fine using display: flex and justify-content: center; but the button just wont budge. I can just use margins but when i resize the page the button stays the same.

Here is the code:

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

/* ---- Set up site grid ---- */

@media (max-width: 600px) {
  .left,
  .right {
    width: 100%;
  }
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: gray;
  font-family: "Montserrat", sans-serif;
}

main {
  grid-area: main;
  background: #272727;
}

footer {
  grid-area: footer;
  background-color: black;
  text-align: right;
  color: white;
}

h1.titleH1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.3vw;
  padding-left: 150px;
  margin: auto;
  color: white;
  /* -- Transform to vertically center heading */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

img.roundleft {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: 1px 0px 10px #000;
  float: left;
}


/*--- Navigation Bar ---*/

.wrapper {
  display: grid;
  grid-template-areas: 'headerLeft headerRight';
  grid-template-columns: 600px 1fr;
}

.headerLeft {
  text-align: left;
  background-color: black;
}

.headerRight {
  text-align: right;
  background: linear-gradient(to left, #55524e, black);
}

.navMenu {
  margin-top: 30px;
  margin-right: 20px;
}

.navMenu a {
  color: #f6f4e6;
  text-decoration: none;
  font-size: 1vw;
  text-transform: uppercase;
  font-weight: 500;
  margin-left: 50px;
  margin-right: 50px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-i n-out;
}

.navMenu a:hover {
  color: #fddb3a;
}


/*---- Main Pages (Rows and Columns) ----*/

.row {
  display: flex;
}

.column {
  height: 800px;
}

.left {
  background-color: black;
  width: 50%;
  float: left;
}

.right {
  background: linear-gradient(to left, #55524e, #171716);
  width: 50%;
  float: left;
}

.homeImage {
  max-width: 100%;
  height: 800px;
}

h1.mainH1 {
  color: white;
  font-size: 2.5vw;
  display: flex;
  justify-content: center;
  margin-top: 1em;
}

h2.mainH2 {
  color: white;
  font-size: 2vw;
  font-family: "Montserrat", sans-serif;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.listItems {
  color: white;
  font-size: 1vw;
  font-family: "Montserrat", sans-serif;
  display: flex;
  justify-content: center;
}

.btnQuiz {
  font-family: "Montserrat", sans-serif;
  background-color: #ffe31c;
  border-radius: 10px;
  border: none;
  color: black;
  padding: 11px 28px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  display: flex;
  justify-content: center;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<main>
  <div class="row">

    <div class="column left">
      <!-- Left -->

      <img class="homeImage" src="images/barbell.jpg" alt="Man lifting barbell">
    </div>

    <div class="column right">
      <!-- Right -->
      <h1 class="mainH1">Welcome to the Fitness project</h1>

      <h2 class="mainH2">Here you can:<br></h2>
      <br>
      <ul>
        <li class="listItems">Learn the fundementals to fitness as well as diet</li>
        <br>
        <li class="listItems">Take a quiz to optimise the information for your goals</li>
        <br>
        <li class="listItems">Expand your knowledge with usefull body building tips</li>
      </ul>

      <button class="btnQuiz">Take Quiz</button>

    </div>

  </div>

</main>

I apologies that there is a lot of CSS that is unrelated to this page. But i hope you understand my problem and any solutions are definitely appreciated.

Answers

- decoyishere
- June 5, 2023 at 9:55 am
- 0 votes
0
You can use that to center a button.
.center { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

<div class="center"> <button>Centered Button</button> </div>
Login or Signup to reply.

**Please try this code. I hope you can get right solution.**
**Change button css**
.btnQuiz{
 font-family: "Montserrat", sans-serif;
  background-color: #ffe31c;
  border-radius: 10px;
  border: none;
  color: black;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  display: flex;
}

**To**
.btnQuiz{
  
 font-family: "Montserrat", sans-serif;
  background-color: #ffe31c;
  border-radius: 10px;
  border: none;
  color: black;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  display: flex;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 75%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}



    @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
    /* ---- Set up site grid ---- */

    @media (max-width: 600px) {
      .left, .right{
        width: 100%;
      }
    }

    * {
      margin: 0;
      padding: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }



    body {
      background: gray;
      font-family: "Montserrat", sans-serif;
    }








    main{
        grid-area: main;
        background: #272727;
        
        
        
    }



    footer{
        grid-area: footer;
        background-color: black;
        text-align: right;
        color: white;
    }




    h1.titleH1 {
        font-family: 'Montserrat', sans-serif;  
        font-size: 2.3vw;
        padding-left: 150px;
        margin: auto;
        color: white;
            
        /* -- Transform to vertically center heading */
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        
        }

    img.roundleft{
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        box-shadow: 1px 0px 10px #000;
        float: left;
    }




    /*--- Navigation Bar ---*/

    .wrapper{
      display: grid;
      grid-template-areas:
        'headerLeft headerRight';

      grid-template-columns: 600px 1fr;

      
              
    }

    .headerLeft{
      text-align: left;
      background-color: black;
    }

    .headerRight{
      text-align: right;
      background: linear-gradient(to left,#55524e, black);
    }


    .navMenu {
      margin-top: 30px;
      margin-right: 20px;
       
      
    }

    .navMenu a {
      color: #f6f4e6;
      text-decoration: none;
      font-size: 1vw;
      text-transform: uppercase;
      font-weight: 500;
      margin-left: 50px;
      margin-right: 50px;
      -webkit-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-i n-out;
    }

    .navMenu a:hover {
      color: #fddb3a;
    }



    /*---- Main Pages (Rows and Columns) ----*/

    .row{
      display: flex;

    }

    .column
    {
      height: 800px;
    }

    .left
    {
      background-color: black;
      width: 50%;
      float: left; 
      
    }

    .right{
      background: linear-gradient(to left,#55524e, #171716);
      width: 50%;
      float: left;
      
    }

    .homeImage{
      max-width: 100%;
      height: 800px;
     

    }

    h1.mainH1{
      color: white;
      font-size: 2.5vw;
      display: flex;
      justify-content: center;

      margin-top: 1em;

      

    }


    h2.mainH2{
      color: white;
      font-size: 2vw;
      font-family: "Montserrat", sans-serif;
      display: flex;
      justify-content: center;
      margin-top: 20px;

    }

    .listItems{
      color: white;
      font-size: 1vw;
      font-family: "Montserrat", sans-serif;
      display: flex;
      justify-content: center;
      

    }

    .btnQuiz{
      
     font-family: "Montserrat", sans-serif;
      background-color: #ffe31c;
      border-radius: 10px;
      border: none;
      color: black;
      text-align: center;
      text-decoration: none;
      font-size: 16px;
      display: flex;
      
     
       margin: 0;
      position: absolute;
      top: 50%;
      left: 75%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <main>
        <div class="row">

            <div class="column left"> <!-- Left -->
                
                <img class="homeImage" src="images/barbell.jpg" alt="Man lifting barbell"> 
            </div>

            <div class="column right"> <!-- Right -->
                <h1 class="mainH1">Welcome to the Fitness project</h1>
                    
                    <h2 class="mainH2">Here you can:<br></h2>
                    <br>
                    <ul>
                        <li class="listItems">Learn the fundementals to fitness as well as diet</li>
                        <br>
                        <li class="listItems">Take a quiz to optimise the information for your goals</li>
                        <br>
                        <li class="listItems">Expand your knowledge with usefull body building tips</li>
                    </ul>

                <button class="btnQuiz">Take Quiz</button>


                
                

            </div>

        </div>

        
    </main>


**Any doubt please comment to me.**

- Alex2739
- June 5, 2023 at 10:05 am
- 0 votes
0
Try using
```
<center>  </center>
```
It is hardcoded but works perfectly fine.
Login or Signup to reply.

- Deadclown09
- June 5, 2023 at 10:42 am
- 0 votes
0
There are two easy ways you can do this:

Method #1:

Give the following css properties to the column right class name:
```
.right {
  display: flex;
  justify-content: center;
  align-items: center;
}
```
Above will center all the contents in your div with classname ‘column right’

Method #2

If you just want to center the button and leave other elements as they are, then wrap button with a div container like this:
```
<div class='btn-wrapper'>
  <button class="btnQuiz">Take Quiz</button>
</div>
```
And then give this css to the btn-wrapper in your css:
```
.btn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.