html - 中央およびスケール入力コントロール

Question

このページを考えると、どうすれば垂直方向に中央に配置し、4 つのボタンを幅 50% (ブラウザの幅に対して) および高さ 20% (ブラウザの高さに対して) にスケーリングすることができますか?他の 20% (ボタンが 80 を占める) % は 4 つあるため) 高さはそれらすべての間で均等に配置されていますか?

Answer 1

このフィドルを確認してください：http ：//jsfiddle.net/dj2fu/

希望どおりに機能させるには、いくつかのことが必要です。

を削除し<br>ます

次のCSSを適用します。

html, body {
    min-height: 100%;
    position: relative;
    height: 100%;
    padding: 0;
    margin: 0;
}
#divMainMenu {
    margin: auto;
    height: 100%;
    width: 100%;
    display: table;
}
#divMainMenu input[type="button"] {
    display: block;
    width: 50%;
    margin: auto;
    height: 20%;
    margin-bottom: 2.5%;
    padding: 0;
    margin-top: 2.5%;
}​