100% height input-field and align text vertically

Question

Maybe a duplicate but I did not found a question with a similar problem.

Ok, I've to create a 100% height input field that centers the text vertically and horizontally. The problem is that if I set the line-height to window-width the cursor gets the same size in Chrome.

Any ideas how to center the text without line-height?

input {
    position: absolute;
    top: 0;
    left 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 0;
    outline: 0
}

Just to set the line-height:

$('input').css({
    lineHeight: $(window).height() + 'px'
});

http://fiddle.jshell.net/G9uVw/

Update

It seems that the question needs to be changed. The problem is that oldIE doesn't center the text, but all other browsers do. So the new question is, how can we check if a browser supports this auto-center-feature?! (Since we know thatua`-sniffing is evil, I don't want to check for a particular browser...)

Update2

It seems that this is a bug in webkit: https://code.google.com/p/chromium/issues/detail?id=47284

I removed the JavaScript lineheight and the text was centered. I'm using Chrome Version 27.0.1453.110. — Ryan Endacott, Jun 18 '13 at 22:28
@RyanE Yeah, sure! The centering the text in chrome is not problem. But in oldIe for example. I'm playing around in ff and opera now. — yckart, Jun 18 '13 at 22:30
@3rror404 Okay, it seems that this occurs only on oldIE. But I hate `ua`-sniffing! — yckart, Jun 18 '13 at 22:31
@RyanE Nope, doesn't center the text in oldIE. BTW: `vertical-align` is only for `block`-elements ;) — yckart, Jun 18 '13 at 22:48
Have you seen this question? http://stackoverflow.com/questions/6412696/how-to-vertical-align-text-on-this-input-box-for-ie It looks like it has a solution for the large cursor on chrome. Or is the large cursor an issue on IE as well? — Ryan Endacott, Jun 18 '13 at 22:51
@RyanE Yep, already seen. I think it's a problem in problem in the *webkit*-core. And should be ignored, since it will fixed soon, so I hope ;) — yckart, Jun 18 '13 at 22:53
This answer also claims to have a fix for the cursor issue in chrome, maybe it could help? The fiddle looks fine to me on chrome, anyway: http://stackoverflow.com/a/10717364/1181886 — Ryan Endacott, Jun 18 '13 at 22:54
@RyanE Yeah, it's a known issue: https://code.google.com/p/chromium/issues/detail?id=47284 (http://jsbin.com/avefi/3) I'll ignore this for now. However, thanks alot for you interest & time :-* — yckart, Jun 18 '13 at 22:55
@yckart thanks for the useful question, had the same issue. I ended up using `top-padding` & `bottom-padding` as a work around, see http://stackoverflow.com/questions/10717294/text-field-cursor-issue-in-chrome/26426266#26426266 — Adriano, Oct 27 '14 at 09:00

score 0 · Answer 1 · answered Jul 01 '14 at 13:25

Try this, should align vertically:

input {

    //// vertical align
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    ////

    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 0;
    outline: 0
}

Not sure if the height: 100% will avoid the job, try it without height: 100% if it doesn't work. If that's the case, maybe the solution is to calculate the height everytime with javascript/jquery.

100% height input-field and align text vertically

1 Answers1