CODEWITHSUNDEEP
htmlcss
deniz
deniz

Reputation: 11

Button Not Centered For Unknown Reason

I am trying to center a button titled "Submit Facial Button", but am encountering an unknown problem.

I also would like to put the button all the way at the bottom of the page.

The following is what I am seeing on the web page: Submit Facial Image Button

I believe there is another element on the web page that is preventing the "Submit Facial Button" from being displayed in its desired position.

If you can spot the issue, please let me know. Thank you!

The following is the code inside the facial-login.html file which dictates what I see on this web page:

<style>
    #video {
        border: 1px solid black;
        width: 500px;
        height: 500px;
        object-fit: cover;
    }

    #photo {
        border: 1px solid black;
        width: 500px;
        height: 500px;
    }

    #canvas {
        display: none;
    }

    .camera {
        width: 500px;
        display: inline-block;
    }

    .output {
        width: 500px;
        display: inline-block;
    }

    #startbutton {
        display: block;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        bottom: 36px;
        padding: 5px;
        background-color: #6a67ce;
        border: 1px solid rgba(255, 255, 255, 0.7);
        font-size: 14px;
        color: rgba(255, 255, 255, 1.0);
        cursor: pointer;
    }

    .contentarea {
        font-size: 16px;
        font-family: Arial;
        text-align: center;
    }

    /* .sendButton {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 12px;
    } */

    .sendButton {
        position: absolute;
        top: 588px;
        /* text-align: center; */
    }

    </style>
    <!--The title of the HTML document.-->
    <title>Facial Image Recognition</title>
</head>

<body>
    <div class="contentarea">
        <h1 align="center">Facial Image Recognition</h1>

        <div class="camera">
            <video id="video">Video stream not available.</video>
        </div>

        <!--An id on a <button> tag assigns an identifier to the button.
            The id allows JavaScript to easily access the <button> element
            and manipulate it.-->
        <button id="startbutton">Capture Image</button>

        <!--The following button will trigger the JavaScript function.-->
        <!-- <button class="sendButton">Submit Facial Image</button> -->
        <button class="sendButton" id="sendButton">Submit Facial Image</button>

        <!--The HTML canvas tag is where the image frames are stored
            before they are converted into an image of proper format
            to be shown using the <img> tag.-->
        <canvas id="canvas"></canvas>

        <div class="output">
            <img id="photo" alt="The image captured will appear in this box.">
        </div>
    </div>

Upvotes: 0

Views: 61

Answers (4)

tborges
tborges

Reputation: 117

You could improve your code structure, because right now your button is fighting/sharing the same space with the next element in your code. Just wrap your <button> with a new <div> something like this:

<div>
   <button class="sendButton" id="sendButton">Submit Facial Image</button>
</div>

...on your CSS do something like this:

.sendButton {
    top: 588px;
}

I will not code all the way for you but this is a good start.

Upvotes: 0

Ali Azarpeykan
Ali Azarpeykan

Reputation: 40

For margin: 0 auto; to work you have to add display:block; to your CSS, add them and that should do it. and then you can use position:absolute; on the button and position:relative; on the parent element that you want to put the button on it.

Upvotes: 0

Asimov-JS
Asimov-JS

Reputation: 16

Your button has a "position: absolute" property, which is positioned relative to the nearest positioned parent, in this case, your DIV with contentarea class. You'll need to add other properties in the CSS style tag to center relatively. For example:

    .sendButton {
            position: absolute;
            top: 50%;
            left: 50%;
        }

Upvotes: 0

Geeky Quentin
Geeky Quentin

Reputation: 2508

Small modification in the CSS properties of your button

.sendButton {
  position: relative;
  top: -20px;
}

Click to expand the modified code below:

<head>
  <style>
    #video {
      border: 1px solid black;
      width: 500px;
      height: 500px;
      object-fit: cover;
    }
    
    #photo {
      border: 1px solid black;
      width: 500px;
      height: 500px;
    }
    
    #canvas {
      display: none;
    }
    
    .camera {
      width: 500px;
      display: inline-block;
    }
    
    .output {
      width: 500px;
      display: inline-block;
    }
    
    #startbutton {
      display: block;
      position: relative;
      margin-left: auto;
      margin-right: auto;
      bottom: 36px;
      padding: 5px;
      background-color: #6a67ce;
      border: 1px solid rgba(255, 255, 255, 0.7);
      font-size: 14px;
      color: rgba(255, 255, 255, 1.0);
      cursor: pointer;
    }
    
    .contentarea {
      font-size: 16px;
      font-family: Arial;
      text-align: center;
    }
    /* .sendButton {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 12px;
    } */
    
    .sendButton {
      position: relative;
      top: -20px;
    }
  </style>
  <!--The title of the HTML document.-->
  <title>Facial Image Recognition</title>
</head>

<body>
  <div class="contentarea">
    <h1 align="center">Facial Image Recognition</h1>

    <div class="camera">
      <video id="video">Video stream not available.</video>
    </div>

    <!--An id on a <button> tag assigns an identifier to the button.
            The id allows JavaScript to easily access the <button> element
            and manipulate it.-->
    <button id="startbutton">Capture Image</button>

    <!--The following button will trigger the JavaScript function.-->
    <!-- <button class="sendButton">Submit Facial Image</button> -->
    <button class="sendButton" id="sendButton">Submit Facial Image</button>

    <!--The HTML canvas tag is where the image frames are stored
            before they are converted into an image of proper format
            to be shown using the <img> tag.-->
    <canvas id="canvas"></canvas>

    <div class="output">
      <img id="photo" alt="The image captured will appear in this box.">
    </div>
  </div>
</body>

Upvotes: 1

Related Questions