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:
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%;
}
>Solution :
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>."