文字和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. 第一个dubbo+zookeeper项目例子

    公司项目要用这两个东西,于是打算学习它. 首先我的理解dubbo是什么?zookeeper是什么?为什要这么搞. 项目分层: 传统的,mvc -->垂直架构(将模块抽取成单独项目,项目互相调用) ...

  2. SharePoint Foundation 搜索-PowerShell

    1. 显示搜索服务信息 Get-SPSearchService 2. 显示搜索服务实例 Get-SPSearchServiceInstance 3. 获取指定搜索服务实例 $ssInstance = ...

  3. if...then

    我到现在明白一些道理 有些事情是徒劳无功的 有些却不是 世间事不过如此,只要你肯付出相应的代价,你就可以得到.

  4. DIY微型操作系统(1)—— 开发的准备

    这个连载是根据<30天自制操作系统>这本书所写 只是类似于补充之类的东西,要详细的讲解,还请参照书上的内容 所以,首先我们要感谢作者川合秀实先生!(鞠躬) 为什么我想写这么一个补充的? 因 ...

  5. TCP/IP网络知识点总结

    学完了计算机网络是时候整理一篇总结了,温故知新.注意:这篇博客很长长长(2.5万字+50图). TCP/IP网络知识点总结 一.总述 1.定义:计算机网络是一些互相连接的.自治的计算机的集合.因特网是 ...

  6. MyEclipse10下创建web项目并发布到Tomcat

    MyEclipse10下创建web项目并发布到Tomcat 1.软件安装(不作详细描述) 2.启动MyEclipse10 3.File-New-Project,选中Web Project,点击Next ...

  7. Magento里显示指定分类的所有子分类

    如何在magento左侧导航栏里显示父分类和子分类名,如果需要在magento显示指定分类的所有子分类,可以用以下的方法: <!--? php   if($category--->hasC ...

  8. python编码问题 decode与encode

    参考: http://www.jb51.net/article/17560.htm 如果要在python2的py文件里面写中文,则必须要添加一行声明文件编码的注释,否则python2会默认使用ASCI ...

  9. GPA

    原题: GPA Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  10. TJU Problem 2520 Quicksum

    注意: for (int i = 1; i <= aaa.length(); i++) 其中是“ i <= ",注意等号. 原题: 2520.   Quicksum Time L ...