如何让文本垂直居中对齐文本框:

建议:尽可能的手写代码,可以有效的提高学习效率和深度。
在默认的情况下,文本时靠近文本框的底部对齐的,所以效果并不是十分的美观。
实例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" /> <head> <title>蚂蚁部落</title> <style type="text/css"> input { height:50px; border:1px solid red; } </style> <body> <div>蚂蚁部落<input type="mytest" /></div> </body> </html>

只要在input中定义的CSS样式中添加一句vertical-align:middle即可。
代码实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" /> <head> <title>蚂蚁部落</title> <style type="text/css"> input { height:50px; border:1px solid red; vertical-align:middle } </style> <body> <div>蚂蚁部落<input type="mytest" /></div> </body> </html>

原文地址:如何让文本垂直居中对齐文本框

你可能感兴趣的:(垂直居中)