I want to center a canvas image and a div by wrapping them into a giant div but my current attempts have failed

Question

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

I have also tried setting it to be dispay: inline-block and then setting it as margin: 0 auto so that maybe it would be centered and on the same line but that results in one image being drastically lower than the other one. I just want the wrapper div (firstDiv) to be centered horizontally.

So the first image shows what happens when I use margin: 0 auto & display: block, the second image shows what happens with my current code, and the third image is a representation of what I desire to accomplish.

Don't deface your posts. – Sotirios Delimanolis May 24 '16 at 02:35 — Sotirios Delimanolis, May 24 '16 at 02:35

score 1 · Answer 1 · answered May 23 '16 at 22:24

1

HTML

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

CSS

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

jsfiddle.net

answered May 23 '16 at 22:24

Thielicious

4,122
2
25
35

score 1 · Answer 2 · edited May 23 '17 at 12:07

1

Remove your float: left in your css class .firstDiv and add the properties display: block; margin: 0 auto;. The problem is you are floating your element. Margins do not move floated elements.

EDIT:

More on what you need for margin: 0 auto; to work here.

edited May 23 '17 at 12:07

Community

1
1

answered May 23 '16 at 23:09

Ricky Ruiz

25,455
6
44
53

score 1 · Answer 3 · answered May 24 '16 at 03:11

Here is your solution. I have used display:table and display:table-cell

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

and please correct me if i have misinterpreted your question.

I want to center a canvas image and a div by wrapping them into a giant div but my current attempts have failed

3 Answers3