【问题标题】:How can I put a button on the middle of the page?如何在页面中间放置一个按钮?
【发布时间】:2019-03-27 21:15:19
【问题描述】:

在页面中间放置按钮时遇到问题!

我尝试在 youtube、google 和 stackoverflow 上搜索,但没有找到任何东西!

<style>
        .firebaseui-auth-container {
            width: 1500px;
            height: 1500px;
            text-align: center;
            margin:0 auto;

        }
</style>

我尝试执行我提到的代码,但它不起作用http://prntscr.com/n3u878(如您所见)

【问题讨论】:

  • 如果用户的浏览器窗口不是 1500px 宽/高会怎样?那应该如何工作?

标签: javascript css button


【解决方案1】:

发布为一个简单的 css sn-p 以显示多种方法之一,具体取决于您的其余要求。

.centerButton {
  left: 50vw;
  top: 50vh;
  position: absolute;
  align-items: center;
  width: 4vw;
}
<html>
  <body>
    <button class="centerButton">Button</button>
  </body>
</html>

【讨论】:

    【解决方案2】:

    试试这段代码,这段代码将类button-centered的按钮定位在任何容器的中心,在这种情况下,一个类为firebaseui-auth-container的元素

    <style>
            .firebaseui-auth-container {
                width: 1500px;
                height: 1500px;
                text-align: center;
                margin:0 auto;
                position:relative;
            }
            .firebaseui-auth-container .button-centered{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate( -50%, -50%);
            }
    
    </style>
    
    

    【讨论】:

    • 没有任何改变!
    猜你喜欢
    • 2015-11-25
    • 2016-04-03
    • 2017-09-23
    • 1970-01-01
    • 2020-09-14
    • 1970-01-01
    • 2019-07-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多