Input标签与图片按钮水平对齐解决方法

昨日,小编的朋友就来咨询,说他也遇到了这个问题,并且使用margin、padding等Css语法,都没有解决。

  解决方法其实很简单,我们只要加上vertical-align:middle属性就可以了。

  来看实例:

 

<input name="jb51" type="text" size="28" value="" style="vertical-align:middle" /> <img src="http://www.jb51.net/images/logo.gif" style="cursor:pointer; vertical-align:middle" /> <center>如不能显示效果,请按Ctrl+F5刷新本页</center>
提示:您可以先修改部分代码再运行

页面直接摆放一个input文本框与ImageButton图片按钮,但是发现没有对齐:
 

复制代码
代码如下:

<input type="text" id="txtQty" />
<asp:ImageButton ID="IBtnBuy" runat="server" />

如图所示


其实只要给图片按钮添加一个css属性就可以:
 

复制代码
代码如下:

<asp:ImageButton ID="IBtnBuy" runat="server" CssClass="btnImg" />
.btnImg{ vertical-align:middle; }

这样就对齐了:

时间: 2024-12-30 18:06:34

Input标签与图片按钮水平对齐解决方法的相关文章

css中input标签与图片按钮对不齐解决方法

页面中img和input顶部总对不齐,预览效果如下: 解决方法其实很简单,我们只要给图片加上vertical-align:middle属性就可以了.  代码如下 复制代码 <input name="veryhuo" type="text" size="28" value="" style="vertical-align:middle" /> <img src="h/images/

css中input标签与图片按钮对不齐怎么办

  页面中img和input顶部总对不齐,预览效果如下: 解决方法其实很简单,我们只要给图片加上vertical-align:middle属性就可以了.  代码如下   <input name="veryhuo" type="text" size="28" value="" style="vertical-align:middle" /> <img src="h/images/8

Win8照片应用新加入图片不显示的解决方法

  在win8系统下,我们使用系统自带的图片浏览器查看文件夹中的图片时,通常情况下浏览器默认读取文件夹中的所有图片,我们只需要通过方向键就可来回切换文件夹中的图片,但是当我们在图片库里增加新图片后,需要关闭图片库后,重新开打图片库才能查看,对于该问题我们需要如何解决呢?下面看小编为大家带来的解决方法! Win8照片应用新加入图片不显示的解决方法 1.从屏幕右边缘向中间轻扫,然后点击"搜索". (如果使用的是鼠标,则指向屏幕右下角,然后将鼠标指针向上移动,再单击"搜索"

win7系统GIF格式图片无法打开的解决方法

  很多用户在使用了win7系统一段时间就会发现,Win7系统内置的图片查看器只能查看普通的图片,但是gif格式的图片是不能通过Win7系统内置的图片查看器来查看的,所以今天小编就来给大家分享下win7系统GIF格式图片无法打开的解决方法. 步骤一:对于我们要查看的gif动态图片,我们可以选用win7 32位纯净版自带的程序来查看的,右键点击gif动态图片,然后选择"打开方式"之后,选择使用IE浏览器来打开查看,就能看到gif动态图的效果了. 步骤二:如果我们不想每次在Win7系统里面

Win7系统桌面背景图片无法居中的解决方法

  我们身边使用电脑的朋友,基本上都会把自己的电脑图片背景设置为喜欢的图片,win7系统的用户也是一样的,这是为了让桌面变的更美观,大家在设置的时候一般情况下都是会把图片居中,让图片看起来比较的均匀,但是发现居中不能使用,是怎么回事呢,换了一张图片试试还是不行,那么设置背景图片无法居中的解决方法是怎么操作的呢,不知道的就跟着小编一起来解决吧! 换桌面背景不能居中的解决方法如下: 1.大家鼠标在桌面空白处右键点击,出现一个菜单选项,选择里面的个性化选项打开,打开后弹出一个新的窗口. 2.弹出打开的

PHP在Windows IIS上传的图片无法访问的解决方法_win服务器

PHP在Windows IIS上传的图片无法访问的解决方法 首先登录到网站后台进行了测试发现上传的图片在确实浏览器打不开且出现了无法访问的错误信息:" 401 - 未 授权: 由于凭据无效,访问被拒绝." 然后又测试了该服务器上其他几个php项目发现也出现了一样的错误: 图片上传成功,但浏览器没有权限访问.因为测试的几个php系统是不一样的,有thinkphp,wordpress,百度ueditor编辑器. 所以这几个系统同时出现问题的概率实在是太小了,所以基本上排除了程序的bug,且

Android Zxing二维码扫描图片拉伸问题的解决方法

还是这个接手项目,二维码扫描集成的是zxing,扫描界面的图像有明显的拉伸变形. 这种问题,根据以往的经验,一般是x,y轴错位引起的,处理好x,y轴的问题,一般可以解决问题. 由于这个问题,之前有很多人遇到,并分享在网上了,所以,我这里也就不需要重复造轮子了. 这里看了一篇博客:Android Zxing二维码扫描图片拉伸,用了上面的办法, 成功的解决图片拉伸问题. 解决方法如下: 修改CameraConfigurationManager.Java里面的initFromCameraParamet

css中vertical-align 图片文字水平对齐分析

vertical-align 定义 最初我认为的vertical-align 解释 跟text-align 一样,是容器内部的非block 元素居中对齐,但~~ 我理解错了 从w3c 官方对 vertical-align 各属性的解释来看,vertical-align 是定义当前节点,跟外围内容的对齐方式,跟text-align 的解释是不一样的. vertical-align:baseline 基线对齐 分析所得,发现baseline不是在中文字的可见部分最下方,而是在英文字的可见部分最下方.

Firefox下input button内文字不能垂直居中的解决方法

在Firefox下input type="button"的文字是不好居中的,原因在于Firefox自己弄了个私有属性,解决方法很简单,遇到类似问题的朋友可以学习下,希望可以帮助到大家   很老的问题了,如今再次碰到,记录下来,给后来者方便! 众所周知,在Firefox下input type="button"的文字是不好居中的,原因在于Firefox自己比较二,弄了个私有属性,导致以下问题的出现: 1.按钮左右本身有2px的间距(FF私有属性写了padding:0 2