CODEWITHSUNDEEP
htmlcss
whyareyounotworkingstepcode
whyareyounotworkingstepcode

Reputation: 3

one button just doesn't want to center

I recently started doing some html and css out of boredom and trying to make a crowdfunding lookalike website but my donate button just doesn't want to center no matter what I do. Other buttons that I made including the one under the donate button seem to be centered propperly.

this is how it looks to me: https://prnt.sc/1os63hf

please help if you can here is my code

.par2 { /* free space*/
    margin-top: 9%;
}

.txt1 { 
    font-family: 'Roberto';
    color: white;
    text-align: center;
}

section .button { /* button*/
    font-family: 'Roboto';
    font-size: 24px;
    color: #151D21;
    background: #ff7a7a;
    display: inline-flex;
    padding: 6px;
    margin-top: 30px;
    margin-right: 5%;
    margin-left: 45%;
    margin-bottom: 6%;
    border: none;
    border-radius: 5px;
    text-align: center;
}

section .button:hover {
    background: white;
    -webkit-transform:  scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
<section class="par2">
            <header class="txt1">
                Interested in helping?
            </header>
            <a class="button" href="pages/donate">
                Donate!
            </a>
        </section>
        <section>
            <header class="txt1">
                Want to ask us a question?
            </header>
            <a class="button" href="pages/contact">
                Contact us!
            </a>
        </section>

Upvotes: 0

Views: 58

Answers (3)

angel_dust
angel_dust

Reputation: 151

I recommend you to wrap the < header > and < a > elements in in a < div >. I used flex in both < section > and < div > elements and centered them; I removed margin-left and margin-right from your code. Also, I changed the text color to black.

Check if there is anything you don't understand.

.par2 { /* free space*/
    margin-top: 9%;
}

.txt1 { 
    font-family: 'Roberto';
    color: black;
    text-align: center;
}

section{ /* set section to flex to turn div elements to flex-items*/
    display: flex;
    justify-content: center;
}

div{/* also set div to flex to turn header and a elements to flex-items*/ 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

section .button { /* button*/
    font-family: 'Roboto';
    font-size: 24px;
    color: #151D21;
    background: #ff7a7a;
    padding: 6px;
    margin-top: 30px;
    margin-bottom: 6%;
    border: none;
    border-radius: 5px;
    text-align: center;
}

section .button:hover {
    background: white;
    -webkit-transform:  scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
<section class="par2">
    <div>    <!-- I added a new div -->
        <header class="txt1">
            Interested in helping?
        </header>
        <a class="button" href="pages/donate">Donate!</a>         
    </div>
</section>

<section>
   <div>     <!-- I added a new div -->
       <header class="txt1">
           Want to ask us a question?
       </header>
       <a class="button" href="pages/contact">Contact us!</a>
   </div>
</section>

Upvotes: 0

user16560377
user16560377

Reputation:

add a div element as parent to sections and use flex

   .par2 {
        /* free space*/
        margin-top: 9%;
    }
    
    .txt1 {
        font-family: 'Roberto';
        color: white;
        text-align: center;
    }
    
    div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    section .button {
        /* button*/
        font-family: 'Roboto';
        font-size: 24px;
        color: #151D21;
        background: #ff7a7a;
        border: none;
        border-radius: 5px;
        text-align: center;
        margin-top: 30px;
        margin-bottom: 6%;
    }
    
    section .button:hover {
        background: white;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

Upvotes: 1

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23480

Try this:

.par2 { /* free space*/
    margin-top: 9%;
}

.txt1 { 
    font-family: 'Roberto';
    color: white;
    text-align: center;
}

section {
  display: grid;
  justify-items: center;
}
section .button { /* button*/
    font-family: 'Roboto';
    font-size: 24px;
    color: #151D21;
    background: #ff7a7a;
    /*display: inline-flex;*/
    padding: 6px;
    margin-top: 30px;
    /*margin-right: 5%;
    margin-left: 45%;*/
    margin-bottom: 6%;
    border: none;
    border-radius: 5px;
    text-align: center;
}

section .button:hover {
    background: white;
    -webkit-transform:  scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
<section class="par2">
            <header class="txt1">
                Interested in helping?
            </header>
            <a class="button" href="pages/donate">
                Donate!
            </a>

            <header class="txt1">
                Want to ask us a question?
            </header>
            <a class="button" href="pages/contact">
                Contact us!
            </a>
        </section>

Upvotes: 1

Related Questions