Heim > Web-Frontend > HTML-Tutorial > 如何实现文本框和验证码图片对齐_html/css_WEB-ITnose

如何实现文本框和验证码图片对齐_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:29:51
Original
2435 Leute haben es durchsucht

如何实现文本框和验证码图片对齐:
在默认情况下,如果文本框和图片在同一个元素中的话,不能够实现垂直对齐,比如验证码功能,左边是文本框,右边是验证码图片,如果不加控制它们是不能够对齐的,下面就通过代码实例介绍一下如何实现文本框和图片的对齐效果。
代码如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">div img,div input{   vertical-align:middle}input{  height:52px;}</style></head><body><div><input type="text"/><img  src="mytest/demo/1.jpg" alt="如何实现文本框和验证码图片对齐_html/css_WEB-ITnose" ></div></body></html>
Nach dem Login kopieren

以上代码实现了我们的要求,不过IE6和IE7浏览器并不支持,不过现在并不是大问题,xp已死,估计很快IE6和IE7浏览器就会消失。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13327

更多内容可以参阅:http://www.softwhy.com/divcss/

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage