如何使 HTML 上的按钮居中？

Question

我是新手所以请原谅。

我正在编写我的第一个网站编码，但我很难将按钮居中。我想把按钮放在 window.

的中间

我会在下面附上代码：

/* 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>

Answer 1

你可以试试这个：

vertical-align:middle;

Answer 2

尝试

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

Answer 3

移除包装纸.Button-SN。

添加：

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

Answer 4

使用clear:both清除浮动方向。

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

Answer 5

方法#01：

将两个图像包装在 div 中，并使用 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>

方法#02：

将clear: both添加到.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>

Answer 6

这个问题已经在 stack overflow 中得到解答，这里有一些有用的链接可以解决您的问题。

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?

Answer 7

尝试将此添加到您的按钮 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;

告诉我你过得怎么样！

谢谢

如何使 HTML 上的按钮居中？

How to center button on HTML?

html

css

css-float