如何在ticTacToe中对齐中心3行

Question

我正在开发一个web ticTacToe应用程序;但是，3行左对齐。我需要中心对齐。我已成功将1行和2行对齐到中心，但由于某种原因，css不适用于3行。有人能发现问题所在吗？

 before_action :authenticate_user!, :only => [:new, :create, :edit]

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;
}

Answer 1

在第二和第三行中，您有<vid>而不是<div>。

Answer 2

代码没问题，只需检查拼写，您输入 vid 而不是div

Answer 3

如果您将三个vid更改为div，那么您的代码将会正常运行，并且它们将会对齐。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;