Question

我可以知道如何将class test(): def a(self): def b(): return 2 return b() test = test() test.a()与页面中心对齐？我似乎无法做到这一点虽然我已经尝试过以前这样的帖子中的许多建议。

需要帮助。

＆＃13;

login button

＆＃13;

body {
  background: white;
  margin: 0;
  font-family: Arial;
}

.wrapper {
  text-align: center;
}

.buttonlogin {
  position: absolute;
  top: 50%;
}

button {
  background-color: FireBrick;
  color: white;
  padding: 16px 25px;
  margin: auto;
  border: none;
  cursor: pointer;
  width: 100%;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

button:hover {
  opacity: 0.8;
}

＆＃13;

Answer 1

您已按下position absolute的按钮，因此您还希望申请left: 50%。然而，您实际上可能还想从宽度中减去偏移，以便元素保持完美位于中心。在这种情况下，您正在寻找left: 45%，因为该元素的width为10%。 top也是如此，可以用calc(50% - (48px / 2))：

计算

body {
  background: white;
  margin: 0;
  font-family: Arial;
}

.wrapper {
  text-align: center;
}

.buttonlogin {
  position: absolute;
  top: calc(50% - (48px / 2));
  left: 45%; /*calc(50% - (10% / 2)); */
}

button {
  background-color: FireBrick;
  color: white;
  padding: 16px 25px;
  margin: auto;
  border: none;
  cursor: pointer;
  width: 100%;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

button:hover {
  opacity: 0.8;
}

<body>

  <div class="wrapper">
    <button class="buttonlogin" onclick="document.getElementById('id01').style.display='block'" style="width:10%;">Login</button>
  </div>

</body>

希望这会有所帮助：）

Answer 2

这是你想要的吗？

multiprocessing

这将按钮放在html的中心。

.buttonlogin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body {
  background: white;
  margin: 0;
  font-family: Arial;
}

.buttonlogin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

button {
  background-color: FireBrick;
  color: white;
  padding: 16px 25px;
  margin: auto;
  border: none;
  cursor: pointer;
  width: 100%;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

button:hover {
  opacity: 0.8;
}

Answer 3

添加：

button {
    left : 50%;
}

Answer 4

.wrapper{
display: flex;
justify-content: center;}

<div class="wrapper">
  <button> Sample </button>
</div>

.wrapper{
  display: flex; 
  justify-content: center;
}

Answer 5

<body>
<table style="width:100%;height:100%">
<tr><td style="text-align:center;vertical-align:middle">
<button>Click me</button>
</td></tr>
</table>
</body>

HTML，CSS - 将按钮对齐到页面中心

5 个答案: