文字和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. hibernate缓存清除(转)

    文章有点杂,这不是原文,谢谢贡献者 http://www.360doc.com/content/16/0413/16/32415095_550307388.shtml 一.hibernate一级缓存( ...

  2. WebGL编程指南理论分析之物体的运动和点光源

    之前的所有案例中物体都是静止的并且是平行光照射,这里我们来讨论一下运动物体和点光源. 一.运动物体 我们知道对于一个提供原始顶点坐标和原始顶点法向量数据的着色器绘制出来的图形看上去是这样的: 看上去很 ...

  3. matlab fgetl()

    % % file=dir('/home/wang/Desktop/trainset/others/'); % % :length(file) % % path= strcat('/home/wang/ ...

  4. XINU安装程序.exe一键配置好XINU实验环境 - imsoft.cnblogs

      还在一步一步配置复杂的XINU吗?XINU安装程序.exe一键配置好XINU实验环境. XINU安装程序.exe使用说明: 本程序配合<网络协议分析与实现>/(胡维华等编著)课本使用 ...

  5. Codeforces Round #224 (Div. 2) A. Ksenia and Pan Scales

    A. Ksenia and Pan Scales time limit per test 1 second memory limit per test 256 megabytes input stan ...

  6. 在windows下制作mac os x的启动安装U盘

    前几天有幸用了下Macbook pro,可在给它装win 7系统时,无知而又手贱地在windows系统下分区了:( 然后再重启就找不到Mac os x,只有win 7了.可进win 7也不正常,直接给 ...

  7. synchronized (lock) 买票demo 线程安全

    加锁防止多个线程执行同一段代码! /** http://blog.51cto.com/wyait/1916898 * @author * @since 11/10/2018 * 某电影院目前正在上映贺 ...

  8. test20190324 树

    题意 树(tree.cpp/c/pas) [题目背景] 这道题标算在评测机上的时间约为自己电脑的2/3 [问题描述] [输入格式] 共 n+2 行.第 1 行 1 个数,n. 后面 2-n 行,每行两 ...

  9. LG3369 【模板】普通平衡树

    题意 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入x数 删除x数(若有多个相同的数,因只删除一个) 查询x数的排名(排名定义为比当前数小的数的个数+1.若有多个相 ...

  10. 完成分析 FastAdmin 用户余额功能(后台篇)

    分析 FastAdmin 用户余额功能(后台篇) 分析 FastAdmin 用户余额功能(后台篇) 虽然 FastAdmin 主要针对后台的框架,但也在不断完善前台的功能,有一天小伙伴在社区里提了一个 ...