如何实现图片与输入框对齐

html 代码：

<body>
    <div class="divWrapper">
        <img class="clsImg" src="img/user.png"/>
        <input type="text" class="clsInpt" id="username" value="Username"/>
        <span>*</span>
    </div>
</body>

css 代码：

body{ font:14px; font-family:Arial, Helvetica, sans-serif;}
.divWrapper{ width:390px; height:39px; margin:0 auto;  margin-top:20px;}
.clsImg{ vertical-align:middle;}
.clsInpt{ width:228px; height:28px; margin-left:15px; color:#C3C3C3; font-size:14px; padding-left:10px; border:solid 1px #DDD; line-height:28px;}
span{ color:#F00;}

时间： 2024-09-30 15:27:57

如何实现图片与输入框对齐的相关文章

css控制图片与文字对齐

文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明:baseline-将支持valign特性的对象的内容与基线对齐sub-垂直对齐文本的下标super-垂直对齐文本的上标top-将支持valign特性的对象的内容与对象顶端对齐text-top-将支持valign特性的对象的文本与对象顶端对齐middle-将支持valign特性的对象的内容与对象中部对齐bottom-将支

图片列表换行错位,图片无法左对齐怎么办

图片与文字标题组成的无序列表,会因为标题长度的不同,而出现换行.这样就出现图片无法左对齐的问题. 可以这样, 一,加上这个css样式 .nowrap{white-space:nowrap;overflow:hidden;} 二,或用程序逻辑判断.比如循环到第四个图片时,添加一个hr换行符标签. hr{background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:1px;margin:10px 0;border:none;-m

图片和文字对齐的方法

文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 方法一. 设置各对象的vertical-align属性,属性说明: baseline-将支持valign特性的对象的内容与基线对齐 sub-垂直对齐文本的下标 super-垂直对齐文本的上标 top-将支持valign特性的对象的内容与对象顶端对齐 text-top-将支持valign特性的对象的文本与对象顶端对齐 middle-将支持valign特性的对象的内容与对象中部

网页中图片的垂直居中对齐

相信很多前端开发人员都曾遇到过需要将图片设置为垂直居中对齐的经历,我刚好在之前的一个项目刚刚解决了这个问题,使用的方法非常简单,兼容性也很好.具体做法如下: 1.只需要兼容各大现代浏览器: 父元素{ display:teble-cell; width:Npx; height:Npx; vertical-align:middle;} 2.如果要兼容IE7以前的低版本IE浏览器: 父元素{ display:teble-cell; width:Npx; height:Npx; vertical-ali

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

昨日,小编的朋友就来咨询,说他也遇到了这个问题,并且使用margin.padding等Css语法,都没有解决. 解决方法其实很简单,我们只要加上vertical-align:middle属性就可以了. 来看实例: 提示:您可以先修改部分代码再运行 页面直接摆放一个input文本框与ImageButton图片按钮,但是发现没有对齐: 复制代码 代码如下: <input type="text" id="txtQty" /> <asp:ImageButt

同一行的图片和文字对齐的几种方法

当图片和文字出现在同一行或一个div里时,浏览器显示出来的图片和文字会出现对不齐,一个在上一个在下,遇到这样的问题,一般有以下几种解决方法 1.把图片和包裹文字的span.a等标签都加上vertical-align:middle的样式(vertical-align的具体介绍) 2.把图片设置为背景图片,文字用padding或text-indent属性设置进行偏移 3.把图片和文字放入不同的div中,然后用margin-left.margin-top属性进行定位,就可以使他们对齐了

css基础 display 解决图片与基线对齐而产生的缝隙问题

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

textarea 边上的字如何才能与textarea的输入框对齐（转）

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

控件设置背景或图片后无法对齐

今天遇到安卓的一个bug,调了半天才解决. bug描写叙述:例如以下图,水平放置一个editTextView和一个button,通过android:layout_alignBottom="@+id/ds_bt_done"之类的方法非常easy让两个组件水平对齐 如今我给button加个颜色(Background): 尼玛,button的位置怎么变了!!! 调了好久,确定这个安卓的一个bug,button在设了background或者color之后会变大,而且布局还是用没设backgro