2
<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;
}
私は巨人のdivにそれらをラップすることにより、キャンバス画像とdiv要素をセンタリングしたいが、私の現在の試みは
を失敗している私もそれを設定しようとしていますinline-blockをマージン：0 autoとして設定すると、中央に配置され、同じ行にあるかもしれないが、その結果、あるイメージが他のイメージよりも大幅に低くなる。私はちょうどラッパーdiv（firstDiv）を水平にセンタリングしたい。
余白を使用すると最初の画像が表示されます：0自動& display：ブロック、2番目の画像は現在のコードで何が起こるかを示し、3番目の画像は私が達成したいものの表現です。
投稿を改ざんしないでください。 –