• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Vertically Align Two Input Tags

 
Steve Dyke
Ranch Hand
Posts: 1616
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I cannot figure out how to get these two input boxes aligned vertically. The following does not work.




Neither does this:



Please help.
 
Devaka Cooray
ExamLab Creator
Marshal
Pie
Posts: 4253
227
Chrome Eclipse IDE Google App Engine IntelliJ IDE jQuery Postgres Database Tomcat Server
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I assume that you want to vertically center your captions ("User ID", "Password") and text boxes. In the simplest way, have a fixed height for your input fields, and use that same height as line-height CSS property for your captions.
 
Steve Dyke
Ranch Hand
Posts: 1616
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Devaka Cooray wrote:I assume that you want to vertically center your captions ("User ID", "Password") and text boxes. In the simplest way, have a fixed height for your input fields, and use that same height as line-height CSS property for your captions.


How will the line-height affect the vertical alignment? Wont this change the horizontal spacing between the text boxes?

Maybe I am asking the question in the wrong manor. What I desire is that the left edges of the two inpt tags align on the page with the same x axis coordinante.
 
Devaka Cooray
ExamLab Creator
Marshal
Pie
Posts: 4253
227
Chrome Eclipse IDE Google App Engine IntelliJ IDE jQuery Postgres Database Tomcat Server
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Maybe I am misinterpreting what you are trying to say, but to make it sure, do you understand that 'horizontal' means X (left-right) axis, and 'vertical' means Y (top-bottom) axis? If lining up the left margins is what you were asking, it is all about horizontal alignment - not vertical. To get that done, you can have a same fixed width assigned to all your captions in the simplest way.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic