How to center button on HTML?

Question

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>

Possible duplicate of [Best way to center a
on a page vertically and horizontally?](http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) — Topr, Aug 16 '16 at 12:19

score 2 · Answer 1 · edited May 23 '17 at 11:46

2

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?

edited May 23 '17 at 11:46

Community

1
1

answered Aug 16 '16 at 12:20

Derick Alangi

1,080
1
11
31

Since you are in a learning process and others have faced the same problem, its better for you to learn how it works from other stack overflow response. That is why I posted links for you to learn from. – Derick Alangi Aug 16 '16 at 12:28
As I consider you are a beginner here on Stackoverflow (because of your rep) I think your answer should be a comment or you should vote this question as duplicate.. – Francisco Romero Aug 16 '16 at 12:56
Ok, that makes sense. – Derick Alangi Aug 16 '16 at 12:58

score 1 · Accepted Answer · edited Mar 16 '17 at 10:23

1

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; 
}

edited Mar 16 '17 at 10:23

Carsten Løvbo Andersen

26,637
10
47
77

answered Aug 16 '16 at 12:19

n1kkou

3,096
2
21
32

Also make sure to have the entire document and body occupy the full height of the window: `html, body{ min-height:100%; height:100%; }` – n1kkou Aug 16 '16 at 12:23
Absolute star! Really appreciate your help and everybody else who gave me suggestions on how I could resolve this! – TheChasers Aug 16 '16 at 22:07
There are many ways to achieve what you wanted; it only depends of the context. Glad to help :) – n1kkou Aug 17 '16 at 09:43

score 0 · Answer 3 · edited Aug 16 '16 at 13:28

0

You can try this:

vertical-align:middle;

edited Aug 16 '16 at 13:28

Nikolay Mihaylov

3,868
8
27
32

answered Aug 16 '16 at 12:19

Akshay

815
7
16

score 0 · Answer 4 · edited Aug 16 '16 at 13:28

0

Try

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

edited Aug 16 '16 at 13:28

Nikolay Mihaylov

3,868
8
27
32

answered Aug 16 '16 at 12:19

zaidysf

492
2
14

Absolute star! Really appreciate your help and everybody else who gave me suggestions on how I could resolve this! – TheChasers Aug 16 '16 at 22:08

score 0 · Answer 5 · answered Aug 16 '16 at 12:20

0

Use clear:both to clear floated direction.

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

answered Aug 16 '16 at 12:20

Mukesh Ram

6,248
4
19
37

Mohammad Usman · Answer 6 · 2016-08-16T12:27:34.690

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>

score 0 · Answer 7 · answered Aug 16 '16 at 12:22

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

How to center button on HTML?

7 Answers7