CODEWITHSUNDEEP
htmlcss
Roderick15
Roderick15

Reputation: 21

I´m having a problem with a button alignment

I was trying to have fun by making a joke with some friends and i ended up getting stuck when a button i my website wasn't aligned in the center of the page.

Where is my HTML code:

  <body>

  <?php include 'navbar.php'; ?>
    <br><br>
    <div class="content">


    <h1> Roderick15's Stuff</h1>
    <br><br>
      <br><br>

    <button onclick="window.location.href='deathnote.php'"
    class="btn">Death Note</button>
  </body>

And where's my css code:

   body {
     margin: 0 auto;
     font-size: 28px;
     font-family: Arial, Helvetica, sans-serif;
   }


   .btn {
    color: white;
    text-align: center;
    font-size: 15px;
    opacity: 1;
    transition-duration: 0.3s;
    background-color: black;
    cursor: pointer;
    display: block;
    float: left;
    margin-right: 5px;
    line-height: 50px;
   }

  .btn:hover {
    opacity: 0.5;
    color : white;
   }

   h1{
    text-align: center;
   }

I hope someone can help me getting rid of this problem.

Upvotes: 1

Views: 222

Answers (2)

Sophia
Sophia

Reputation: 31

To be able to center an element horizontally you can use "margin: auto" This requires the object to have a certain width, (for example "width: 150px;")

In your example, you use "float left", which causes the element to stick to the left of the screen in this case.

Removing "float: left;" and "margin-right: 5px;" and adding 

"width: 150px;"
"margin: auto;"

Should do the trick.

So that the .btn class looks like this;

.btn {
    color: white;
    text-align: center;
    font-size: 15px;
    opacity: 1;
    transition-duration: 0.3s;
    background-color: black;
    cursor: pointer;
    display: block;
    line-height: 50px;
    width: 150px;
    margin: auto;
}

I recommend W3 schools if you need any more info. https://www.w3schools.com/css/default.asp

Upvotes: 1

westag
westag

Reputation: 76

you should remove the float left and change the margin to "0 auto" if you want to center the button

   .btn {
        color: white;
        text-align: center;
        font-size: 15px;
        opacity: 1;
        transition-duration: 0.3s;
        background-color: black;
        cursor: pointer;
        display: block;
        margin: 0 auto;
        line-height: 50px;
        }

Upvotes: 1

Related Questions