• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Vertically Align Two Input Tags

 
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
 
Sheriff
Posts: 7135
1360
IntelliJ IDE jQuery Eclipse IDE Postgres Database Tomcat Server Chrome Google App Engine
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Sheriff
Posts: 7135
1360
IntelliJ IDE jQuery Eclipse IDE Postgres Database Tomcat Server Chrome Google App Engine
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
 
Consider Paul's rocket mass heater.
reply
    Bookmark Topic Watch Topic
  • New Topic