Vertically centering of input field / input field text

I'm stuck.
I need to place either an input box vertically centered inside a fixed-height div, or vertically center the text of a fixed-height input box.
Is there a cross-browser compatible way to achieve this without css hacks?

 

Yup. Use tables.

People say that tableless coding is best than table-based coding. IMO that is not truth. You can have the best of both worlds.

Personally, I code everything using divs/spans/etc but when it comes to forms I use tables. Tables can manage horizontal/vertical centering much better than divs and it's cross-browser: it'll look centered everywhere. Why am I telling you to use tables on forms? Because as you might already know, each browser render pages using their own logic of what web standards are. Specially Microsoft's Internet Explorer.

Using tables isn't that bad as some people like to say. Just learn when to use them.

Oh, btw you could also use Javascript to achieve what you want to do. I don't recommend it, though.

 

thanks for the suggestion Ikki, but it sends cold shivers down my spine to think about using tables for presentational purposes. Damn you, ideals..!

Allright, my solution that so far works best:
- input field inside of a span
- span has line-height of the desired height

and.. I put a div with the desired height and overflow:hidden around the whole thing to keep it from breaking the design when the user changes the browser's font size.

Not optimal, If anyone can come up with anything more clean I'd appreciate it, but at least it works for now.

 

See Centering Inline Elements. Oddly enough, I just updated an old demo and added explanations of what's happening. Don't think of it as a hack, though it has the elegance that defines hackness. Think of it as working around a certain browser's lack of modern capabilities.

A single-celled table would work, and it may be the best solution. The trouble is that a revamping of the presentation requires recoding the html—which illustrates css's very reason for being. A table solution is a work-around completely without elegance, thus falling well short of the gloriosity that is hackdom.

cheers,

gary

 

Hmmm, if an input is an inline element, why can't it be vertical-align: middle'd anyway? Or is this a whole other block box with an input inside of it??

My forms don't have tables, though I never needed inputs to be centered specially. When I have a div (wrapper) around each label-input pair and need the input to line up alongside the left-floated label, I often find I have to give the label a 150% line height to make it look good.

I have used tables in forms which were also data tables. I hated it, as I felt I had no control over the form's table like I do in normal forms. But that may just be my newness to tables (though I've built a lot of them).

I learn a new table bug it seems like every day : ( Damn tables, with their funny widths and their funny data cells : ( and their IE bugz like friggin tr borders grrrr... and their FF bugz with positioned elements grrr...

Okay, coffee time. With chocolate. Mmmm, lekker.

 

In XHTML/CSS using tables is JUST for tubular data, the rest must be done using tableless XHTML.

 

I use vertical-align in my demo for IE. The issue is, "how do you make the anonymous line box 1) use the full height of the container, and 2) apply to multiple lines of text/inputs/etc. as a unit?"

Consider this:

<fieldset>
  <legend>box</legend>
  <label for "fname">Enter your full name as you wish it to appear</label><br>
  <input type="text" name="fname" id="fname">
</fieldset>
==============
fieldset {
    width: 200px;
    height: 200px;
  }

Code (markup):

It gets less simple.

cheers,

gary

 

Not exactly true.

See html3.2

What you should say is that tables used for layout purposes cannot be well structured or semantic, though it can be well formed (valid). You could add that that usage is poor practice, but it is definitely permitted.

cheers,

gary

 

I agree - use a table. It's perfectly valid CSS container that does that kind of alignment job quickly and simply.