Question

请告诉我如何将我的按钮移动到页面中心。因为现在它在右上角，我试了很多次来移动它。

        <style>
        .button {
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            padding: 13px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 17px;
            cursor: pointer;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
            font-weight: bold;
        }

        .button1:hover {
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        }
    </style>


    <button class="button button1" type="button" onclick="history.back()" value="חזור וחשב מחדש">חשב מחדש</button>

Answer 1

水平对齐，你需要把css放在包含div上，以控制子元素......

.container {
    display: block;
    margin: 0 auto;
    text-align: center;
}

<div class="container">
    <button class="button button1" type="button" onclick="history.back()" value="חזור וחשב מחדש">חשב מחדש</button>
</div>

如果您想垂直居中元素，请使用...

button {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Answer 2

或者你也可以使用flexbox，它是一种在水平和垂直方向快速居中元素的强大方法。

您只需将按钮放在容器中，将flexbox应用于该容器，然后margin: auto;将完成剩下的工作。

＆＃13;

.container {
  display: flex;
}
 
.button {
  margin: auto;
}

＆＃13;

<div class="container">
  <button class="button button1" type="button" onclick="history.back()" value="חזור וחשב מחדש">חשב מחדש</button>
</div>

＆＃13;

如何将按钮移动到中心（html，jsp）？

2 个答案: