Question 203334 in Html Question posted in
Some basic documentation can be found here.

Html – Button is lower than the other elements

I am making a very simple site for my application, but I still want it to not look half hearted. Currently, I cannot get the button aligned to the other two elements properly. Picture reference:

Picture Reference

I want all elements in the picture to align properly on a single line.

Here is my html/css code so far:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AntonPaar User Application</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<h3>Please select a file:</h3>

<label for="fileList" >File: </label>
<select id="fileList" onchange="readLines()"></select>

<br>
<label for="progress-bar" id="barLabel">Progress: </label>
<div id="progress-bar"></div>
<button id="break" onclick="abortProgress()">Abort</button>
<br><br>

<table id="showTable">
</table>

</body>
</html>

#progress-bar{

    border:1px solid black;
    height: 20px;
    width: 300px;
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;

}

#loading-bar{

    background: greenyellow;
    border-radius: 20px;
    height: 100%;

}

#barLabel{

    float: left;
    margin-left: 38.5%;
    vertical-align: middle;

}

#break{

    float: right;
    margin-right: 38.5%;

}

#showTable{

    border:2px solid black;
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto;

}

.show-table-entry{

    border-bottom:1px solid black;

}

.show-table-header{

    border-bottom:2px solid black;
    width: 15%;

}
Tags:

2

Answers


  1. 0

    A simple setup would be to use a Flexbox parent element which would vertically and horizontally align the inner elements (Progress, Input, Abort):

    .flex-parent {
  display: flex; /* Create a Flexbox parent container */
  justify-content: center; /* Align Flex items horizontally */
  align-items: center; /* Align Flex items vertically */
  gap: 1rem; /* Give a gap 1rem between the 3 Flex items */
}

#progress-bar{

    border:1px solid black;
    height: 20px;
    width: 300px;
    border-radius: 20px;

}
    <div class="flex-parent">
  <label id="barLabel">Progress: </label>
  <div id="progress-bar"></div>
  <button id="break">Abort</button>
</div>

    Remember: the <div> elements cannot be associated with <label> elements. So, having he label for attribute associated with a div (via the for/id ‘progress-bar’) won’t have any effect.

    "Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>."

    Login or Signup to reply.
  2. 0

    Well, you can simply wrap all three in a div tag and use flex.
    Also, you need to change the margin-left and margin-right for your barLabel and ‘break’. Here is the code with the changes:

    #progress-bar{

    border:1px solid black;
    height: 20px;
    width: 300px;
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;

}

#loading-bar{

    background: greenyellow;
    border-radius: 20px;
    height: 100%;

}

#barLabel{

    float: left;
    /* margin-left: 38.5%; */
    vertical-align: middle;

}

#break{

    float: right;
    /* margin-right: 38.5%; */

}

#showTable{

    border:2px solid black;
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto;

}

.show-table-entry{

    border-bottom:1px solid black;

}

.show-table-header{

    border-bottom:2px solid black;
    width: 15%;

}
.container{
  display:flex;
  flex-direction:row;
  justify-content:space-around;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AntonPaar User Application</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<h3>Please select a file:</h3>

<label for="fileList" >File: </label>
<select id="fileList" onchange="readLines()"></select>

<br>
  <div class='container'>    
     <label for="progress-bar" id="barLabel">Progress:      </label>
     <div id="progress-bar"></div>
     <button id="break"  onclick="abortProgress()">Abort</button>
    <br><br>
  </div>

<table id="showTable">
</table>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search