CODEWITHSUNDEEP
htmlcsscss-float
TheChasers
TheChasers

Reputation: 65

How to center button on HTML?

I am new to this so please excuse me.

I am working on my first website coding and, I am having so much difficulties with centering my button. I want to place the button on the middle of the window.

I will attach the code below:

/* Hide Scroll */

html, body {
            overflow:hidden;
           }

/* Home Page - Background Image */

body {
        background: url(Image-2.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        top: 0;
        left: 0;
        min-width: 100%;
        min-height: 100%;
     }

/* Mains */

#Mains-Logo {
            margin-top: 42px;
            margin-left: 80px;
            }

#Mains-Basket {
                float: right;
                margin-top: 48px;
                margin-right: 96px;
              }

#Mains-SP {
            text-align: center;
            margin-top: 785px;
            margin-left:810px;
          }

/* Button */

.Button-SN {
            text-align: center;
            min-height: 100%;
            min-width: auto;
           }

.SN {
    border: 5px solid #fcfcfc;
    padding: 8px 25px;
    margin: auto;
    }
<body>
    <img id="Mains-Logo" src="Logo.png">
    <img id="Mains-Basket" src="Basket.png">

 <!-- THIS RIGHT HERE -->
  
    <div class="Button-SN">
        <a class="SN" href="#">SHOP NOW</a>
    </div>
 
<!-- END -->  
  
</body>

<footer>
    <a href="#"><img id="Mains-SP" src="SP.png"></a>
</footer>

Upvotes: 1

Views: 4962

Answers (7)

n1kkou
n1kkou

Reputation: 3142

Remove the wrapper .Button-SN.

Add: 

.SN{ 
  position:absolute; 
  display: inline-block;
  top:50%; 
  left:50%; 
  width:150px; 
  border: 5px solid #fcfcfc; 
  line-height: 40px; 
  margin-top:-20px; 
  margin-left:-75px; 
}

Upvotes: 1

Akshay
Akshay

Reputation: 805

You can try this:

vertical-align:middle;

Upvotes: 0

zaidysf
zaidysf

Reputation: 502

Try 

.Button-SN {
    text-align: center;
    margin: 0 auto;
}

Upvotes: 0

Mohammad Usman
Mohammad Usman

Reputation: 39322

Method #01:

Wrap both images in a div and set layout of parent with overflow: hidden.

/* Hide Scroll */

html, body {
    overflow:hidden;
}

/* Home Page - Background Image */

body {
    background: url(Image-2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
}

/* Mains */
.image-holder {
    overflow: hidden;
}

#Mains-Logo {
    margin-top: 42px;
    margin-left: 80px;
}

#Mains-Basket {
    float: right;
    margin-top: 48px;
    margin-right: 96px;
}

#Mains-SP {
    text-align: center;
    margin-top: 785px;
    margin-left:810px;
}

/* Button */

.Button-SN {
    text-align: center;
    min-height: 100%;
    min-width: auto;
}

.SN {
    border: 5px solid #fcfcfc;
    display: inline-block;
    vertical-align: top;
    padding: 8px 25px;
    margin: auto;
}
<body>
    <div class="image-holder">
        <img id="Mains-Logo" src="Logo.png">
        <img id="Mains-Basket" src="Basket.png">
    </div>

 <!-- THIS RIGHT HERE -->
  
    <div class="Button-SN">
        <a class="SN" href="#">SHOP NOW</a>
    </div>
 
<!-- END -->  
  
</body>

<footer>
    <a href="#"><img id="Mains-SP" src="SP.png"></a>
</footer>

Method #02:

Add clear: both to the styles of .Button-SN.

/* Hide Scroll */

html, body {
    overflow:hidden;
}

/* Home Page - Background Image */

body {
    background: url(Image-2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
}

/* Mains */

#Mains-Logo {
    margin-top: 42px;
    margin-left: 80px;
}

#Mains-Basket {
    float: right;
    margin-top: 48px;
    margin-right: 96px;
}

#Mains-SP {
    text-align: center;
    margin-top: 785px;
    margin-left:810px;
}

/* Button */

.Button-SN {
    text-align: center;
    min-height: 100%;
    min-width: auto;
    clear: both;
}

.SN {
    border: 5px solid #fcfcfc;
    display: inline-block;
    vertical-align: top;
    padding: 8px 25px;
    margin: auto;
}
<body>
    <img id="Mains-Logo" src="Logo.png">
    <img id="Mains-Basket" src="Basket.png">

 <!-- THIS RIGHT HERE -->
  
    <div class="Button-SN">
        <a class="SN" href="#">SHOP NOW</a>
    </div>
 
<!-- END -->  
  
</body>

<footer>
    <a href="#"><img id="Mains-SP" src="SP.png"></a>
</footer>

Upvotes: 0

kehoewex86
kehoewex86

Reputation: 21

Try adding this to your button CSS:

display: flex;
justify-content: center; /*centers items on the line (the x-axis by default)*/
align-items: center; /*centers items on the cross-axis (y by default)*/
position:absolute;

Let me know how you get on!

Thanks

Upvotes: 0

Derick Alangi
Derick Alangi

Reputation: 1100

This question has already been answered in stack overflow, here are some useful links to solve your problem.

align text in middle/center of page and button on bottom/center

How to center a button within a div?

trying to align html button at the center of the my page

How to center html element in browser window?

Upvotes: 2

Mukesh Ram
Mukesh Ram

Reputation: 6328

Use clear:both to clear floated direction. 

.Button-SN {
    clear: both;
    min-height: 100%;
    min-width: auto;
    text-align: center;
}

Upvotes: 0

Related Questions