I've been stuck on this issue for a few hours now and tried everything I could think of.
Essentially, I have a form that takes an email address and a token in two separate input boxes/fields, I have centred the entire form and put the two boxes on separate lines however when I look closely (and measure), the two textboxes for the user to type into, are misaligned by 8 pixels and it's driving my OCD nuts. Here is the code that I have for the form.
<form id = "order" method = "POST" action ="/orderemail">
<label for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Email:</label>
<input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="email" id="email" name="email" placeholder="Enter your email" required><br><br>
<label for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Token:</label>
<input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="text" id="token" name="token" placeholder="Enter your token" required>
</form>
I have double-checked and the "text-info" CSS is not causing it at all and I've tried removing all the other CSS styling/references to classes I can see without solving the problem. I've included an image of the code as well.
CodePudding user response：
It's because your labels don't have the same width. Words, even with the same number of letters, can be smaller / wider than each other, depending on the font you use. An "W" take generally more space than a "I", for exemple.
What to need to do is to either put a width / min-width on your label, use columns or use a table. You can probably do something else too, but, in the end, you need to make sure there is some kind of "space separation" between your labels and inputs.
CodePudding user response：
You can put a padding right on label if you want to be super align. the label text is the issue. but you can use padding if thats a huge deal for you like below;
<form id = "order" method = "POST" action ="/orderemail">
<label for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large; padding-right:2px;">Email:</label>
<input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="email" id="email" name="email" placeholder="Enter your email" required><br><br>
<label for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Token:</label>
<input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="text" id="token" name="token" placeholder="Enter your token" required>
</form>CodePudding user response：
If you have access to the HTML to put each input and label pair into a container, using flexbox on that container is a nice dynamic way of doing this.
You can use flex: 1; on the input-element to make sure they're the same size.
flex: 1; is a shorthand for:
flex-grow: 1; = Element will grow in same proportion as the window-size
flex-shrink: 1; = Element will shrink in same proportion as the window-size
flex-basis: 0; = Element does not have a starting value as such and will
take up screen as per the screen size available for e.g:- if 3 divs are in the wrapper then each div will take 33%.
Source for above: https://stackoverflow.com/a/37386525/14776809
You can then apply max-width to let the input scale as high as you want. I used 70px in this example, but if you have a larger text, you can just use a higher value.
Edit
flexbox also works great with grid. Below is an example of how you can make sure both the div-containers have the same height:
/* For equal height - not necessary */
form {
display: grid;
grid-auto-rows: 1fr;
}
/* -------------------------------- */
div {
display: flex;
}
div>label {
flex: 1;
max-width: 70px;
}<form id="order" method="POST" action="/orderemail">
<div>
<label for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Email:</label>
<input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="email" id="email" name="email" placeholder="Enter your email" required><br><br>
</div>
<div>
<label for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Token:</label>
<input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="text" id="token" name="token" placeholder="Enter your token" required>
</div>
</form>CodePudding user response：
You can use the margin function to move it by 4 pixels to make it align the same.
<form id = "order" method = "POST" action ="/orderemail">
<label for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Email:</label>
<input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="email" id="email" name="email" placeholder="Enter your email" required><br><br>
<label for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Token:</label>
<input style="text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="text" id="token" name="token" placeholder="Enter your token" required>
</form>
<style>
#email{
margin-left: 4px;
}
</style>CodePudding user response：
You can use margin-left property (on text-box style) to have an equal margin from your labels
<form id = "order" method = "POST" action ="/orderemail">
<label for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Email:</label>
<input style="margin-left:8px;text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="email" id="email" name="email" placeholder="Enter your email" required><br><br>
<label for="email" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;">Token:</label>
<input style="margin-left:4px;text-align:center; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: bolder; font-size: x-large;" type="text" id="token" name="token" placeholder="Enter your token" required>
</form>