文字和img、input并排在一行的时候,img和input位置总是会偏移一点,input就用复选框和按钮举例,如下图:

  只要在img和input样式加上vertical-align:middle;就可以垂直居中了,效果如下图:

  复选框在firefox、ie6和ie7下面还是有一点点偏移,追求完美的话,可以用float:left和!important分别调整。当然一般情况下尽量少用!important,为了完美嘛。

  这里还有一个办法,刚刚查到的文章,已转载到博客(后面一篇),就将font-family中的第一个字体设置为Tahoma,则可以完美的实现对齐(Verdana等字体也可以)。

  其实这个办法也不太理想,因为一般情况下很少会把font-family字体设置为Tahoma或Verdana这个吧,不过也算是个解决办法。

文字和img、input并排无法对齐的问题的更多相关文章

  1. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  2. CSS控制图片和文字在同一行显示且对齐的3种方法

    CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...

  3. 图片 文字 input等垂直居中对齐

    span::before { width:100%; height:1px; font-size:1em; content:''; background:#fff; position:absolute ...

  4. 关于input标签无法对齐的解决方法!

    在布局中发现各个input之间很难对齐,解决方法如下: 将input设置vertical-align属性: vertical-align:middle vertical-align:top verti ...

  5. label 和input/textarea居中对齐

    设置label和input/textarea的vertical-align: middle;即可实现垂直方向居中对齐.有时候可能会有偏差,设置input的margin-top使看上去居中对齐

  6. input lable水平对齐

    1.CSS <style type="text/css">       input,label { vertical-align:middle;} </style ...

  7. input 标签左对齐

    不要忘记下载jquery包,并引用到工程文件里. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...

  8. 点击文字,把input type="radio"也选中

    本文原文地址:https://my.oschina.net/jack088/blog/469815 1. <label> <input type="radio" ...

  9. TextMesh Pro Emoji Align With Text(表情和文字对齐)

    前言 MMO游戏中需要富文件组件,大体功能包括图文混排,表情,超链接,文字动画等富文本功能,且DC数占用少. 本文选择Unity免费提供的TextMesh Pro 解决方案. 软件环境 Unity3D ...

随机推荐

  1. 20165202 Mypwd

    实现mypwd(选做,加分) 1 学习pwd命令 2 研究pwd实现需要的系统调用(man -k; grep),写出伪代码 3 实现mypwd 4 测试mypwd 提交过程博客的链接 实现过程 使用m ...

  2. 2019.1.10 L223

    Heavy rains that brought additional pollution downstream last year contributed to the first decline ...

  3. php include,require 主要是向网页中引入文件

  4. ARM裸板开发:07_IIC 通过IIC总线接口读写时钟芯片时间参数实现的总结

    问题一:程序直接在iRAM内部可正常执行,而程序搬移(Nand ->SDRAM)之后,就不能正常运行了 #define NAND_SECTOR_SIZE 2048 /* 读函数 */ void ...

  5. Java实现哈夫曼编码和解码

    最近无意中想到关于api返回值加密的问题,譬如我们的api需要返回一些比较敏感或者重要不想让截获者得到的信息,像如果是做原创图文的,文章明文返回的话则有可能被抓包者窃取. 关于请求时加密的方式比较多, ...

  6. vue 之 .$mount()

    $mount():手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载.例如: <div id=&quo ...

  7. ListBox 控件单击事件

    XAML: <ListBox x:Name="ItemBox" Grid.Column="0" Tap="ItemBox_Tap"&g ...

  8. poll 从应用层到内核实现解析

    poll函数的原型如下所示: int poll(struct pollfd *fds, nfds_t nfds, int timeout); poll可以监视多个描述符的属性变化,其参数的意义如下: ...

  9. 关于前端的margin

    margin 边界,元素周围生成额外的空白区.“空白区”通常是指其他元素不能出现且父元素背景可见的区域.——CSS权威指南 我比较喜欢使用“外边距”这个词来解释margin(同理padding可以称之 ...

  10. 配置海康相机SDK文件

    前言 项目使用到海康摄像机,进行二次开发需要首先对SDK文件进行相关配置. 实现过程 1.下载SDK开发包: 网址:http://www.hikvision.com/cn/download_61.ht ...