CSS实现让同一行文字和输入框对齐的方法

2015-5-13 11:42 1093 0

摘要: 本文实例讲述了CSS实现让同一行文字和输入框对齐的方法。分享给大家供大家参考。具体分析如下：大家都知道有时候一个文本输入框和一段文字在同一行上显示，然而它们总不是垂直居中，看上去不美观，这段CSS...

关键词： 一行输入代码同一 CSS 下边上边垂直美观 Text1Text2

本文实例讲述了CSS实现让同一行文字和输入框对齐的方法。分享给大家供大家参考。具体分析如下：大家都知道有时候一个文本输入框和一段文字在同一行上显示，然而它们总不是垂直居中，看上去不美观，这段CSS代码就是解决这一问题的，上边一行是没有定义，下边一行是定义过的，可以看出有明显的差别。复制代码代码如下:<html><head><title>CSS让同一行文字和输入框对齐</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">#a { height:30px; border:1px solid #ccc;}#b { margin-top:20px; height:30px; border:1px solid #ccc;}#a input { width:200px; height:30px; border:1px solid red;}#b input { width:200px; height:30px; border:1px solid red; vertical-align:middle;}</style></head><body><div id="a"><input />Text1</div><div id="b"><input />Text2</div></body></html>

声明：文章版权归原作者所有部分文章转自互联网如有侵权请联系 [邮箱地址] 删除