How to centrally align text boxes with each other? - html

Question

I am trying to get these text boxes to align in a neat order with one another in order to actually look nice, however upon browser viewing they're scattered all over the place. Below is my textbox declaration:
Enter ISBN to update: <input type="text" name="isbn" placeholder="Enter ISBN..."> <br><br>
Title <input type="text" name="titleUpdate " placeholder="Enter Updated Title..."> <br><br>
Author <input type="text" name="authorUpdate" placeholder="Enter Updated Author..."> <br><br>
Genre <input type="text" name="genreUpdate" placeholder="Enter Updated Genre..."< <br><br>
Year Published <input type="text" name="yearUpdate" placeholder="Enter Updated Year..."<br><br>
<!--ISBN <input type="text" name="isbnUpdate" placeholder="First name"<br><br>-->
I feel as though I need to do some CSS magic however I'm not so sure as to what I need to do.

Answer 1

I think you are off to a good start. There are some errors in your HTML, a couple of the items have wrong closing tags. What you want to do is structure the markup a little to give you some control. Take for instance this markup:
<div class="field">
<label for="isbn">Enter ISBN to update:</label>
<input type="text" id="isbn" name="isbn" placeholder="Enter ISBN...">
</div>
<div class="field">
<label for="titleUpdate">Title</label>
<input type="text" id="titleUpdate" name="titleUpdate" placeholder="Enter Updated Title...">
</div>
<div class="field">
<label for="authorUpdate">Author</label>
<input type="text" id="authorUpdate" name="authorUpdate" placeholder="Enter Updated Author...">
</div>
<div class="field">
<label for="genreUpdate">Genre</label>
<input type="text" id="genreUpdate" name="genreUpdate" placeholder="Enter Updated Genre...">
</div>
<div class="field">
<label for="yearUpdate">Year Published</label>
<input type="text" id="yearUpdate" name="yearUpdate" placeholder="Enter Updated Year...">
</div>
Notice how we wrap the text for the text fields as labels. I grouped a label and input field together in its own . Once you have your HTML structure, we can adjust how it looks. For example, aligning all the labels to the left, and then align the boxes to right would "align in a neat order". One way of doing this by using this css:
.field {
margin-bottom:10px;
width:400px;
clear:both;
}
label {float:left;}
input[type=text] {float:right; width:200px;}
Take a look at this codepen as an example - https://codepen.io/anon/pen/vwmRbv