How to control text alignment within input?

**toplisek** · 04-06-2009 10:23 AM

I have css but how to control text in the input that will be in the middle of input (vertical-horizontal control).
It seems that 22px input will give me text to the top...with font size 12px.

**KDLA** · 04-06-2009 02:23 PM

Apply a line-height the height of the input.

**toplisek** · 04-07-2009 03:33 AM

Please see what I have. It will bring text not in the middle even I use:
vertical-align:middle; see snap. Is this control correct or my css uses some div where is align TOP...

**Kor** · 04-07-2009 03:40 AM

As KDLA said: use a block element and give it the same height and line-height values

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.mydiv {
width:100px;
height:50px;
line-height:50px;
border:solid 1px #ff0000;
}
</style>
</head>
<body>
<div class="mydiv">text here</div>
</body>
</html>

**toplisek** · 04-07-2009 03:43 AM

ok, I understand and have given.
you see text inside input like sample vbvf. I would like to move it in the middle, but it is at the top...this is issue.

**Kor** · 04-07-2009 04:10 AM

Well you are half-right, it works in IE, but it will not work in FF. It looks like FF has not implemented the CSS line-height within the form's textboxes. I guess the only workaround is to give your input a padding-top enough to bring your text in the middle.

**toplisek** · 04-09-2009 02:33 AM

Will IE detect padding-top? I think I noticed that sometimes IE and Mozilla show margin and padding different.

Thread: How to control text alignment within input?

Thread Tools

Display

How to control text alignment within input?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions