How to Make Input Text Boxes Go Vertical in HTML
The text that displays next to your HyperText Markup Language (HTML) input text box is aligned vertically against the boundaries of this element by default, but you have the option to position it somewhere else, such as the middle of the box, as you prefer. Cascading Style Sheets (CSS) works with your existing HTML to give you more control over how these labels display. Use your computer's text editor software to apply the CSS that manages the vertical setting for your text boxes.
Other People Are Reading
Instructions
-
-
1
Start your computer's text editor software, such as Notepad, and open the HTML file that contains the text box.
-
2
Position your cursor before the closing "</head>" tag and type the CSS code as shown here:
<style type="text/css">
</style>
-
-
3
Enter "input.text" followed by a set of curly brackets between the style elements like so:
input.text { }
The input.text rule creates a CSS declaration that controls the text boxes in your form.
-
4
Type "vertical-align: ;" between the brackets and enter a preferred vertical setting, such as "top," after the colon. To illustrate:
input.text { vertical-align: top; }
Vertical alignment values are the following: baseline, sub, super, top, text-top, middle, bottom, text-bottom and inherit.
-
5
Locate the text box code in the HTML (for example, "<input type="text">"). Enter "class=" inside the input element and follow this with "input.text" in quotation marks to assign the CSS rule:
<input class="input.text" type="text">
Repeat this process in each text box code to apply the vertical alignment.
-
6
Save your file.
-
1
References
Resources
- Photo Credit Jupiterimages/Photos.com/Getty Images
