Button Not Centered For Unknown Reason-CodePudding

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 >
        <h1 align="center">Facial Image Recognition</h1>

        <div >
            <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 >Submit Facial Image</button> -->
        <button  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 >
            <img id="photo" alt="The image captured will appear in this box.">
        </div>
    </div>

CodePudding user response：

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 >
    <h1 align="center">Facial Image Recognition</h1>

    <div >
      <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 >Submit Facial Image</button> -->
    <button  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 >
      <img id="photo" alt="The image captured will appear in this box.">
    </div>
  </div>
</body>

CodePudding user response：

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

CodePudding user response：

Your button is fighting/sharing the same space with the next element below. You need to have a better organization. Just wrap your into like this:

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

and then on your CSS something like this:

.sendButton {
    top: 588px;
}

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

CodePudding user response：

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.