HTML CSSのセンターボタン

Question

ページにボタンを配置する際に問題が発生しています。

HTML-コード

.banner { 
 
    background-color: #101723; 
 
    width: 100%; 
 
    padding: 50px 0; 
 
} 
 

 
.button { 
 
    display: inline-block; 
 
    width: 20%; 
 
    margin: auto; 
 
    padding: 16px 0; 
 
    text-transform: uppercase; 
 
    vertical-align: middle; 
 
    border: 3px solid #FFFFFF; 
 
    color: #FFFFFF; \t 
 
    text-align: center; 
 
    font-weight: bold; 
 
    letter-spacing: 2px; 
 
}

<section class="banner"> 
 
    <a href="" target="_blank"><div class="button">BUTTON 1</div></a> 
 
    <a href="" target="_blank"><div class="button">BUTTON 2</div></a> 
 
    <a href="" target="_blank"><div class="button">BUTTON 3</div></a> 
 
</section>

3つのボタンは、容器の中央になければなりません。私はすべてを試みたが、私は何かを逃しているようだ。

Answer 1

ちょうどあなたの.bannerクラスにtext-align: centerを追加します。

.banner { 
 
    background-color: #101723; 
 
    width: 100%; 
 
    padding: 50px 0; 
 
    text-align:center; 
 
} 
 

 
.button { 
 
    display: inline-block; 
 
    width: 20%; 
 
    margin: auto; 
 
    padding: 16px 0; 
 
    text-transform: uppercase; 
 
    vertical-align: middle; 
 

 
    border: 3px solid #FFFFFF; 
 
    color: #FFFFFF; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    letter-spacing: 2px; 
 
}

<section class="banner"> 
 
    <a href="" target="_blank"><div class="button">BUTTON 1</div></a> 
 
    <a href="" target="_blank"><div class="button">BUTTON 2</div></a> 
 
    <a href="" target="_blank"><div class="button">BUTTON 3</div></a> 
 
</section>

Answer 2

を単なるテキスト整列を追加：コンテナのdivにセンター：CSSでセンタリング

.banner { 
     background-color: #101723; 
     width: 100%; 
     padding: 50px 0; 
     text-align: center; 
    } 

Answer 3

は常に困難なものとなっています実装する。私が考えるベストフレックスボックスの方法を発見します。

.container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; /* To center vertically */ 
    justify-content: center; /* To center horizontally */ 
} 
.item { 
} 

あなたがここに必要なすべてを見つけることができます。.banner` `上center`：https://www.w3schools.com/css/css3_flexbox.asp