How can I make a text in an input box at the center in the vertical direction in IE7?
If firefix4 , the text in the input box is at the middle but in IE7, the text is at the top..How can I make the text align vertically at the center of the inpu开发者_高级运维t box in IE7?
Untitled Document
<body>
<!-- start wrapper -->
<div class="wrapper">
<!-- start header -->
<div class="header">
<div class="Login">
<h1>User Login</h1>
<form name="Login" method="#" action="#">
<input type="text" value="User Name" />
<input type="password" value="password" />
</form>
<div class="links"><h3>Not yet a Member?</h3> <a href="">Register Now</a> <a href=""> <span>Login</span></a></div>
</div>
</div>
<!-- End header -->
<!-- Start main -->
<div class="main"></div>
<!-- End main -->
<!-- start footer -->
<div class="footer"></div>
<!-- End footer -->
</div>
<!-- End wrapper -->
/* CSS */
@charset "utf-8";
/* CSS Document */
/* CSS Reset */
ul,li,h1,h2,h3{padding:0;margin:0;}
ul{list-style:none;}
/* CSS for wrapper */
.wrapper{background:#fffde4 ;width:664px;height:789px;margin:0 auto;border:#000 thin groove;color:#bb9d59;padding:17px 28px 28px 35px;font-family:Arial, Helvetica, sans-serif; }
/* Header */
.header{width:664px;border:#000 thin groove;overflow:hidden;}
.Login{width:390px;border:#000 thin double;float:right;}
h1{margin-bottom:7px;border:#000 thin groove;color:#2c787b;font-size:27px;}
input[type="text"],input[type="password"]{width:172px;height:21px;color:#bb9d59;background- color:#f9f6d4;border:none;font-size:10px;padding-left:9px;float:left}
input[type="text"]{border:#000 thin groove;}
input[type="password"]{border:#000 thin groove;margin-left:15px;}
http://jsfiddle.net/s2wrS/
I usually use vertical-align: middle; You give the containing element a line-height then set vertical-align to the content. This example seems to "work for me:"
http://jsfiddle.net/pb4vT/2/
Good luck!
ps - looks like vertical-align is not needed, oops :)
Use line-height: Xpx; where X is the height of your textbox.
加载中,请稍侯......
精彩评论