Question

我目前正在一个网站上工作，我正在尝试制作一个中心且响应灵敏的按钮，但它只是不起作用！

HTML：

<div id="button-container">
  <button id="who-are-we" class="font-spec">quem somos</button>
</div>

CSS：

#button-container {
    width: 120px;
    display:block;
    position:relative;
    margin-top: 100px;
    margin-left: 50%;
    text-align: center;
    height: auto;
  }

#who-are-we {
    font-family: Volkorn;
    background: white;
    border: 4px solid black;
    cursor: pointer;
    max-width: 180%;
    max-height: 100%;
    width:220px;
    height: 70px;
    font-size: 200%;
    text-align: center;
  }

我尝试弄乱边距，但必须有一种更简单的方法，当窗口变小时，我也试图让按钮更小。

Answer 1

在指定宽度和高度时使用百分比（％）。

另外，我不明白为什么＃who-are-we width（220px）大于＃button-container width（120px）

以下是一个例子：

#button-container {
    width: 100%;
    display:block;
    position:relative;
    margin-top: 100px;
    text-align: center;
    height: auto;
}

#who-are-we {
    font-family: Volkorn;
    background: white;
    border: 4px solid black;
    cursor: pointer;
    max-width: 180%;
    max-height: 100%;
    width:220px;
    height: 70px;
    font-size: 200%;
    text-align: center;
  }

<div id="button-container">
  <button id="who-are-we" class="font-spec">quem somos</button>
</div>

Answer 2

不清楚是否需要垂直或水平居中，但这里是水平居中的示例，按钮是页面的width:30%;。该按钮居中，因为其父级是100％宽度（默认情况下，因为它是div）并且text-align: center;使所有子元素居中。

#button-container {
    margin-top: 100px;
    text-align: center;
  }

#who-are-we {
    font-family: Volkorn;
    background: white;
    border: 4px solid black;
    cursor: pointer;
    width:30%;
    height: 70px;
    font-size: 200%;
    text-align: center;
  }

<div id="button-container">
  <button id="who-are-we" class="font-spec">quem somos</button>
</div>

使按钮响应并水平居中

2 个答案: