脚本宝典收集整理的这篇文章主要介绍了html如何实现文本上下居中,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
htML实现文本上下居中的方法:首先创建一个HTML示例文件;然后创建一个文本框;接着定义Text的height属性;最后通过css中“vertical-align:middle;”等属性实现文本上下居中即可。
本教程操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑。
推荐:css视频教程
让HTML中的文本框中的文字垂直居中
当你自己定义了 Text 的 height 属性时,在 Text 中输入的文字都不是垂直居中的,不过你可以添加CSS来控制它,让输入的文字垂直居中,使网页更完美
<html> <head> <style tyPE="text/css"> #text { height:20px; vertical-align:middle; line-height:20px; /*line-height must be equal to height*/ } </style> </head> <body> <div> <input type="text" id="text"> </div> </body> </html>
加入 verticla-align、line-height 两个属性后,文本框中的文字就在文本框中垂直居中了,要注意的是 line-height 必须要等于 height。
以上就是html如何实现文本上下居中的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的html如何实现文本上下居中全部内容,希望文章能够帮你解决html如何实现文本上下居中所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。