如何实现文本框和验证码图片对齐

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

<!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"></div>
</body>
</html>

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

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

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

时间: 2024-10-08 22:18:58

如何实现文本框和验证码图片对齐的相关文章

&lt;input&gt;文本框和验证码图片垂直对齐

<input>文本框和验证码图片垂直对齐:不知道大家有没有遇到过这样的情况,那就是文本框和验证码图片在垂直方位上不是对齐的,这样有点影响美观度,下面就简单介绍一下如何让它们垂直对齐,代码如下: input,img {vertical-align:middle;} 以上代码可能有兼容性问题,比如IE6可能不支持,那就将input文本框和验证码单独放在容器中控制. vertical-align属性可以参阅CSS的vertical-align属性一章节. 原文地址是:http://www.51tex

html5 canvas+原生javascript 实时获取文本框内容绘制图片水印

最近有位客户要求在网页图片上加文字水印效果,并且内容是从当前网页的文本输入框实时获取的,研究了一半天,在网上也参考了不少朋友的办法,再加上园子里热心的好哥们帮助终于实现了,先看下效果图: 代码如下: 1 <!DOCTYPE html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>drawing by input text</title> 5 </head> 6 7 <

Python3 tkinter基础 Text image 文本框中插入图片

? python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 conda : 4.5.11 type setting : Markdown ? code """ @Author : 行初心 @Date : 18-10-1 @Blog : www.cnblogs.com/xingchuxin @GitHub : github.com/GratefulHeartCoder """ fr

工作笔记5.JAVA文本框验证码

本文主要内容为:利用JAVA文本框制作验证码. 设计思路: 1.页面加载时,自动生成验证码. 2.后JS判定验证码是否输入正确 优点: 代码简洁,便于使用.页面中可直接判定验证码的正确性,无需传到后台Action中. 缺点: 由于本验证码是由text制作,容易被浏览器抓取/手动copy,丢失了其本质特性(安全性). <script type="text/javascript"> var code ; //在全局 定义验证码 function createCode() { c

图片上面添加文本框重叠效果

根据修的图的效果,通过切片,实现文本框和图片重叠. 好的css习惯都是去掉外内边距,为了适应更多的浏览器兼容性. 样式部分: <style tyle="text/css"> *{ padding:0px; margin:0px; } </style> 标签部分: <div style="position: relative; z-index: 1;"> <div> <img src="images/na

获取后台富文本框内容,截取图片

1.split()  分割字符串,转化成数组 (1)分割数据中有某段字符串的数据 ,转化成数组 //拿取富文本框中的图片var div=data[0].text.split("/agriculture/uploads/");//定义一个变量存放字符串数据 var divstr="";//循环div的长度 for(var k=0;k<div.length;k++){ if(k==0){ //第一个k是字符串,文本内容 divstr+=div[k]; }else{

C# 操作Word文本框——插入图片、表格、文字、超链接等

概述 Text Box(文本框)是Word排版的工具之一.在Word文档中的任何地方插入文本框,可添加补充信息,放在合适的位置,也不会影响正文的连续性.我们可以设置文本框的大小,线型,内部边距,背景填充等效果.文本框内可以图文混排,设置字体,字号,图片大小.文字链接,绘入表格等.在下面的示例中,将分为两部分来介绍在Word中插入文本框,分别是:第一部分:插入图文混排的文本框,包含图片填充,内部边距,图文混排.文字超链接等元素第二部分:关于在文本框中插入表格.读取表格.删除表格等操作 使用工具 *

SharePoint 在文本编辑框中插入图片报错

SharePoint 在文本框中插入图片如果报错“Upload Image: An unexpected error has occurred.”, 很有可能是网站自带的“SiteAssets”文档库没有编辑权限.因为我们在文本框中插入图片的时候,默认的图片的存储在“SiteAssets”文档库中.

MFC静态文本框

1.简述 静态文本框(Static Text):静态文本框是最简单的控件,它主要用来显示文本信息,不能接受用户输入,一般不需要连接变量,也不需要处理消息. 2.Functions 2.1 void CWnd::SetWindowText( LPCTSTR lpszString ) void CStaticDialogDlg::OnBnClickedButton1() { // TODO: 在此添加控件通知处理程序代码 m_stext.SetWindowTextW(TEXT("Hello"