どのように私はticTacToeのセンター3の行を揃えることができます

Question

私はWeb ticTacToeアプリケーションで作業しています。ただし、3行は左に揃えられます。そして私はセンターアライメントが必要です。私は正常に1と2行を中心に揃えましたが、何らかの理由でCSSが3行に適用されていません。誰かが問題が何かを見分けることができますか？あなたが<vid>代わりの<div>を持って2行目と3行目の

body { 
 
    background-color: #999; 
 
    font-family: sans-serif, verdana; 
 
} 
 

 
.container { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 

 
.row>div { 
 
    margin: 5px; 
 
    border: solid 1px black; 
 
    display: inline-block; 
 
    font-size: 35px; 
 
    width: 50px; 
 
    height: 50px; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <!-- header --> 
 
    <div class="header"> 
 
    <h1>TicTacToe</h1> 
 
    <h2>You're playing against the computer!</h2> 
 
    </div> 
 
    <div class="ticTacToe"> 
 

 
    <!-- first row (3 square) --> 
 
    <vid class="row"> 
 
     <div class="square">X 
 
     </div> 
 
     <div class="square">0 
 
     </div> 
 
     <div class="square">X 
 
     </div> 
 
    </div> 
 

 
    <!-- second row (3 square) --> 
 
    <vid class="row"> 
 
    <div class="square">X 
 
    </div> 
 
    <div class="square">0 
 
    </div> 
 
    <div class="square">X 
 
    </div> 
 
</div> 
 

 
<!-- third row (3 square) --> 
 
<vid class="row"> 
 
    <div class="square">0 
 
    </div> 
 
    <div class="square">X 
 
    </div> 
 
    <div class="square">0 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div>

Answer 1

。

Answer 2

コードはokです、ちょうどスペルチェック、あなたはdivに3つのvid Sを変更する場合は、あなたのコードが動作すると、彼らが整列されますvid代わりのdiv

Answer 3

を入力しています。

body { 
 
    background-color: #999; 
 
    font-family: sans-serif, verdana; 
 
} 
 

 
.container { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 

 
.row>div { 
 
    margin: 5px; 
 
    border: solid 1px black; 
 
    display: inline-block; 
 
    font-size: 35px; 
 
    width: 50px; 
 
    height: 50px; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <!-- header --> 
 
    <div class="header"> 
 
    <h1>TicTacToe</h1> 
 
    <h2>You're playing against the computer!</h2> 
 
    </div> 
 
    <div class="ticTacToe"> 
 

 
    <!-- first row (3 square) --> 
 
    <div class="row"> 
 
     <div class="square">X 
 
     </div> 
 
     <div class="square">0 
 
     </div> 
 
     <div class="square">X 
 
     </div> 
 
    </div> 
 

 
    <!-- second row (3 square) --> 
 
    <div class="row"> 
 
     <div class="square">X 
 
     </div> 
 
     <div class="square">0 
 
     </div> 
 
     <div class="square">X 
 
     </div> 
 
    </div> 
 

 
    <!-- third row (3 square) --> 
 
    <div class="row"> 
 
     <div class="square">0 
 
     </div> 
 
     <div class="square">X 
 
     </div> 
 
     <div class="square">0 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>