Html 我想通过将画布图像和div包装成一个巨大的div来居中放置，但我目前的尝试失败了测试项目绘制人脸图协调：点击右眼的右角点击右眼的左角点击右眼瞳孔点击左眼的右角点击左眼的左角单击左眼瞳孔上的单击鼻子的左角单击鼻子的右角单击嘴唇的中上部单击嘴唇的左角在嘴唇的右角点击单击嘴唇的中间底部单击嘴唇左角和中上部之间的中点单击嘴唇右角和上中之间的中点单击嘴唇左角和底部中间之间的中点单击嘴唇右角和底部中间之间的中点单击鼻尖底部单击面部最左侧单击面部最右侧单击下巴最下面的中央底部单击头部中央顶部_Html_Css

Html 我想通过将画布图像和div包装成一个巨大的div来居中放置，但我目前的尝试失败了测试项目绘制人脸图协调：点击右眼的右角点击右眼的左角点击右眼瞳孔点击左眼的右角点击左眼的左角单击左眼瞳孔上的单击鼻子的左角单击鼻子的右角单击嘴唇的中上部单击嘴唇的左角在嘴唇的右角点击单击嘴唇的中间底部单击嘴唇左角和中上部之间的中点单击嘴唇右角和上中之间的中点单击嘴唇左角和底部中间之间的中点单击嘴唇右角和底部中间之间的中点单击鼻尖底部单击面部最左侧单击面部最右侧单击下巴最下面的中央底部单击头部中央顶部

html css

Html 我想通过将画布图像和div包装成一个巨大的div来居中放置，但我目前的尝试失败了测试项目绘制人脸图协调：点击右眼的右角点击右眼的左角点击右眼瞳孔点击左眼的右角点击左眼的左角单击左眼瞳孔上的单击鼻子的左角单击鼻子的右角单击嘴唇的中上部单击嘴唇的左角在嘴唇的右角点击单击嘴唇的中间底部单击嘴唇左角和中上部之间的中点单击嘴唇右角和上中之间的中点单击嘴唇左角和底部中间之间的中点单击嘴唇右角和底部中间之间的中点单击鼻尖底部单击面部最左侧单击面部最右侧单击下巴最下面的中央底部单击头部中央顶部,html,css,Html,Css,一,。这个人是男性还是女性男性女性二,。他们戴眼镜吗是否三,。他们戴着帽子吗是否四,。他们的种族是什么非洲的美国的西班牙裔亚洲的第一组{ 显示：内联块；字体大小：1.7em；字号：100；字体系列：Helvetica；宽度：640px；高度：680px；边框：黑色；填充物：5px；边框样式：实心；浮动：左； } firstDiv.你好{ 显示：块； } 第二组{ 字体系列：Helvetica；字体大小：0.5em； } #海德尔迪夫{

一,。这个人是男性还是女性

二,。他们戴眼镜吗

三,。他们戴着帽子吗

    <head>

    <title>Test project</title>

</head>
<link rel="stylesheet" type="text/css" href="design.css">

<body>
    <div id = "headerDiv">
    <h1 id="state">map the face</h1>
    <h2 id="header">coordinates: </h2>
    </div>
    <!--map the face-->

    <div class="firstDiv">
        <p id="0" class="hello">click on the right corner of the right eye</p>
        <p id="1" style="display: none">click on the left corner of the right eye</p>
        <p id="2" style="display: none">click on the pupil of the right eye </p>
        <p id="3" style="display: none">click on the right corner of the left eye </p>
        <p id="4" style="display: none">click on the left corner of the left eye </p>
        <p id="5" style="display: none">click on the the pupil of the left eye </p>
        <p id="6" style="display: none">click on the left corner of the nose </p>
        <p id="7" style="display: none">click on the right corner of the nose</p>
        <p id="8" style="display: none">click on the top middle of the lips</p>
        <p id="9" style="display: none">click on the left corner of the lips </p>
        <p id="10" style="display: none">clck on the right corner of the lips</p>
        <p id="11" style="display: none">click on the bottom middle of the lips </p>
        <p id="12" style="display: none">click on halfway point between the left corner of the lips and the top middle</p>
        <p id="13" style="display: none">click on halfway point between the right corner of the lips and the top middle</p>
        <p id="14" style="display: none">click on halfway point between the left corner of the lips and the bottom middle</p>
        <p id="15" style="display: none">click on halfway point between the right corner of the lips and the bottom middle</p>
        <p id="16" style="display: none">click on the bottom tip of the nose </p>
        <p id="17" style="display: none">click on the farthest left side of the face </p>
        <p id="18" style="display: none">click on the farthest right side of the face </p>
        <p id="19" style="display: none">click on the lowest center bottom of the chin </p>
        <p id="20" style="display: none">click on the center top of the head </p>

        <div class = "secondDiv">
    <div id="question1" style="display: none;">
        <p>1. Is this person male or female?</p>
        <ul class="answers">
            <input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Male</label><br/>
            <input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Female</label><br/>
        </ul>
    </div>

    <div id="question2" style="display: none;">
        <p>2. Do they have glasses on?</p>
        <ul class="answers">
            <input type="radio" name="q2" value="a" id="q2a"><label for="q2a">Yes</label><br/>
            <input type="radio" name="q2" value="b" id="q2b"><label for="q2b">No</label><br/>
        </ul>
    </div>

      <div id="question3" style="display: none;">
        <p>3. Do they have a hat on?</p>
        <ul class="answers">
            <input type="radio" name="q3" value="a" id="q3a"><label for="q3a">Yes</label><br/>
            <input type="radio" name="q3" value="b" id="q3b"><label for="q3b">No</label><br/>
        </u>
    </div>

      <div id="question4" style="display: none;">
        <p>4. What's their ethnicity?</p>
        <ul class="answers">
            <input type="radio" name="q4" value="a" id="q4a"><label for="q4a">African</label><br/>
            <input type="radio" name="q4" value="b" id="q4b"><label for="q4b">American</label><br/>
            <input type="radio" name="q4" value="a" id="q4a"><label for="q4c">Hispanic</label><br/>
            <input type="radio" name="q4" value="b" id="q4b"><label for="q4d">Asian</label><br/>
        </ul>
    </div>
    </div>
    </div>

    <!--give attributes-->

    <!--this is the enter button-->
    <div id = buttonDiv>
    <input id="buttonUndo" type="submit" name="button" value="undo" />
    <input id="submit" type="submit" name="button" value="submit" />
    <input id="notValid" type="submit" name="button" value="not valid" />
    </div>

    <div class = "firstDiv"><canvas id="canvas" width="640" height="480"></canvas></div>
    <script>

    .firstDiv{
  display:inline-block;
  font-size: 1.7em;
  font-weight: 100; 
  font-family:Helvetica;
  width: 640px;
  height: 680px;
  border: black;
  padding: 5px;
  border-style: solid;
  float: left;

}

.firstDiv .hello{
  display: block;
}

.secondDiv{
  font-family: Helvetica;
  font-size: 0.5em;
}

#headerDiv{
  background-color: black;
  color: white;
}

float:left

display:block；保证金：0自动。问题是您正在浮动元素。边距不会移动浮动元素
编辑：
更多关于margin:0 auto开始工作。
这是您的解决方案。我使用了display:table
和display:table cell

#canvas {
  background: #f00;
  margin: 0 auto;
  display: block;
}


测试项目
giantDiv先生{
显示：表格；
宽度：100%；
}
第一组{
显示：表格单元格；
垂直对齐：顶部；
字体大小：1.7em；
字体系列：Helvetica；
宽度：640px；
高度：680px；
边框：黑色；
填充物：5px；
边框样式：实心；
}
firstDiv.你好{
显示：块；
}
第二组{
字体系列：Helvetica；
背景颜色：黄色；
字体大小：0.5em；
背景颜色：绿色；
}
#海德尔迪夫{
背景色：黑色；
颜色：白色；
}
#纽顿迪夫{
显示：块；
}
绘制人脸图
协调：
点击右眼的右角
点击右眼的左角
点击右眼瞳孔
点击左眼的右角
点击左眼的左角
单击左眼瞳孔上的
单击鼻子的左角
单击鼻子的右角
单击嘴唇的中上部
单击嘴唇的左角
在嘴唇的右角点击
单击嘴唇的中间底部
#canvas {
  background: #f00;
  margin: 0 auto;
  display: block;
}

<html>
  <head>

      <title>Test project</title>

      <link rel="stylesheet" type="text/css" href="design.css">
      <style>

      .giantDiv{
        display: table;
        width:100%;
      }
      .firstDiv{
        display:table-cell;
        vertical-align: top;
        font-size: 1.7em;
        font-family:Helvetica;
        width: 640px;
        height: 680px;
        border: black;
        padding: 5px;
        border-style: solid;

      }

      .firstDiv .hello{
        display: block;
      }

      .secondDiv{
        font-family: Helvetica;
        background-color: yellow;
        font-size: 0.5em;
        background-color: green;
      }

      #headerDiv{
        background-color: black;
        color: white;
      }
      #buttonDiv{
        display: block;
      }
      </style>
    </head>

    <body>
      <div id = "headerDiv">
        <h1 id="state">map the face</h1>
        <h2 id="header">coordinates: </h2>
      </div>
      <!--map the face-->
      <div class="giantDiv">
        <div class="firstDiv">
          <p id="0" class="hello">click on the right corner of the right eye</p>
          <p id="1" style="display: none">click on the left corner of the right eye</p>
          <p id="2" style="display: none">click on the pupil of the right eye </p>
          <p id="3" style="display: none">click on the right corner of the left eye </p>
          <p id="4" style="display: none">click on the left corner of the left eye </p>
          <p id="5" style="display: none">click on the the pupil of the left eye </p>
          <p id="6" style="display: none">click on the left corner of the nose </p>
          <p id="7" style="display: none">click on the right corner of the nose</p>
          <p id="8" style="display: none">click on the top middle of the lips</p>
          <p id="9" style="display: none">click on the left corner of the lips </p>
          <p id="10" style="display: none">clck on the right corner of the lips</p>
          <p id="11" style="display: none">click on the bottom middle of the lips </p>
          <p id="12" style="display: none">click on halfway point between the left corner of the lips and the top middle</p>
          <p id="13" style="display: none">click on halfway point between the right corner of the lips and the top middle</p>
          <p id="14" style="display: none">click on halfway point between the left corner of the lips and the bottom middle</p>
          <p id="15" style="display: none">click on halfway point between the right corner of the lips and the bottom middle</p>
          <p id="16" style="display: none">click on the bottom tip of the nose </p>
          <p id="17" style="display: none">click on the farthest left side of the face </p>
          <p id="18" style="display: none">click on the farthest right side of the face </p>
          <p id="19" style="display: none">click on the lowest center bottom of the chin </p>
          <p id="20" style="display: none">click on the center top of the head </p>

          <div class = "secondDiv">
            <div id="question1" style="display: none;">
              <p>1. Is this person male or female?</p>
              <ul class="answers">
                <input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Male</label><br/>
                <input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Female</label><br/>
              </ul>
            </div>

            <div id="question2" style="display: none;">
              <p>2. Do they have glasses on?</p>
              <ul class="answers">
                <input type="radio" name="q2" value="a" id="q2a"><label for="q2a">Yes</label><br/>
                <input type="radio" name="q2" value="b" id="q2b"><label for="q2b">No</label><br/>
              </ul>
            </div>

            <div id="question3" style="display: none;">
              <p>3. Do they have a hat on?</p>
              <ul class="answers">
                <input type="radio" name="q3" value="a" id="q3a"><label for="q3a">Yes</label><br/>
                <input type="radio" name="q3" value="b" id="q3b"><label for="q3b">No</label><br/>
              </u>
            </div>

            <div id="question4" style="display: none;">
              <p>4. What's their ethnicity?</p>
              <ul class="answers">
                <input type="radio" name="q4" value="a" id="q4a"><label for="q4a">African</label><br/>
                <input type="radio" name="q4" value="b" id="q4b"><label for="q4b">American</label><br/>
                <input type="radio" name="q4" value="a" id="q4a"><label for="q4c">Hispanic</label><br/>
                <input type="radio" name="q4" value="b" id="q4b"><label for="q4d">Asian</label><br/>
              </ul>
            </div>
          </div>
        </div>

        <!--give attributes-->

        <!--this is the enter button-->
        <div class = "firstDiv">

          <canvas id="canvas" width="640" height="480"></canvas>
          <div id = 'buttonDiv'>
            <input id="buttonUndo" type="submit" name="button" value="undo" />
            <input id="submit" type="submit" name="button" value="submit" />
            <input id="notValid" type="submit" name="button" value="not valid" />
          </div>
        </div>
      </div>
    </body>
    </html>