我如何对齐中心3行ticTacToe

-2

我正在处理web ticTacToe应用程序;然而，3行左对齐。我需要中心对齐。我已经成功地将1行和2行对齐居中，但由于某种原因，CSS不适用于3行。有人能发现问题是什么吗？我如何对齐中心3行ticTacToe

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>

来源

2017-08-04 miatech

可能是事实，你行不div的，但VID的。 – Vilsol

你有'vid'你的意思是'div'吗？它看起来像你正在关闭外部股利。 –

考虑使用一些改进的空白/缩进。 –

在第二排和第三排你有<vid>而不是<div>。

来源

2017-08-04 16:20:32 sn3ll

的代码是好的，只是检查拼写，你输入的vid代替div

来源

2017-08-04 16:20:35

如果你改变了三种vid s到div那么你的代码将工作，他们将保持一致。

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>

来源

2017-08-04 16:25:25 Ivan

我如何对齐中心3行ticTacToe

回答

相关问题