做一個按鈕響應和水平居中

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

不清楚是否需要垂直居中或水平居中，但這裏是一個水平居中的例子，並且該頁面的按鈕爲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>

Answer 2

分配寬度和高度時使用百分比（％）。

另外，我不明白爲什麼＃誰 - 是 - 我們寬度（220px）比＃按鈕容器寬度（120像素）

這裏更大的是一個例子：

#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>