Geek Answers Handbook

CSS alignment of spans, inputs and buttons

I am looking for a way to align several elements (spans, inputs and buttons) in such a way that, despite their different sizes, their vertical midpoint is on the same horizontal line: Alignment

How to do it in CSS? Here's the HTML file to play:

<html> <head> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"> <style> .content { font-size: 18px; border: 1px dotted blue; } .content input, .content button { font-size: 40px; float: left; } .label { border: 1px dotted red; float: left; } .clear { clear: both; } </style> </head> <body> <div class="content"> <span class="label">Label: </span><input type="text"> <span class="label">More text: </span><input type="text"> <button type="submit">Submit Me</button> <div class="clear"></div> </div> </body> </html>
+4
source share
3 answers

As others have said (David Nguyen and thirty), the addition of vertical-align:middle; will cause you to do this while you get rid of the floats that are currently in your code. Adding display:inline-block; will allow you better control over the sizes, and I don’t know if you plan on it, but I would definitely change your <span class="label"> tags to actual <label> tags.

+8
source

Set the main div line-height: height of the tallest element in px, then set vertical-align: middle . You may need to set display:inline or display:inline-block to subelements.

That should work.

+10
source

For your range, input, and button, the property is required: vertical-align:middle;display:inline

+1
source

More articles:


All Articles