Question

我建立了一个非常简单的网站，当你点击按钮时，它有一个标题和2个带有链接的按钮。

我不知道如何放置按钮。现在，他们在我的标题下面的屏幕左侧显示彼此相邻。我希望它们显示在屏幕中间，彼此相邻，它们之间大约有100个像素。我看到一个帖子，你可以在屏幕中间放一个按钮，但它没有解决间距的2按钮问题。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>New Unit</title>
    </head>
    <body>
        <div id="terminal_banner"> New Unit Landing Page </div>
        <a href="#" class="button1">Button</a>
        <a href="#" class="button1">Button</a>
    </body>
</html>

Answer 1

你的意思是

<!DOCTYPE html>

<html>
<head>
  <title>New Unit</title>
  <link rel="stylesheet" href="website1.css">
</head>
<body>
<div id="terminal_banner"> New Unit Landing Page </div>
  <div align="center" >
    <a href="#" class="button1">Button</a> <!-- &nbsp;  &nbsp; -->
     <br>
    <a href="#" class="button1">Button</a>
  </div>
</body>
</html>

Answer 2

怎么样：

<div id="terminal_banner"> New Unit Landing Page </div>
<div class=button-wrap>
    <a href="#" class="button">Button</a>
    <a href="#" class="button">Button</a>
</div>

.button-wrap {
  width: 100%;
  height: 100vh;
  position: relative;
  text-align: center;
}
.button {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 50px;
}

Answer 3

如果您想要始终垂直和水平居中（即使重新调整窗口大小）：

<body>
    <div style="position:fixed; bottom:50%; left:50%">
        <button>Button</button>
        <button>Button</button>
    </div>
</body>

如何在屏幕中间放置2个按钮

3 个答案: