文字和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. cmake 手册详解

    cmake 手册中文版,后续再相关博客的其他链接中,感谢翻译的好人! https://www.cnblogs.com/coderfenghc/archive/2012/06/16/CMake_ch_0 ...

  2. DevExpress v17.2新版亮点—WinForms篇(五)

    用户界面套包DevExpress v17.2终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.开篇介绍了DevExpress WinForms v17.2 Data Grid Control ...

  3. git误提交了项目文件和配置文件的恢复方法

    参考链接:https://my.oschina.net/yangfuhai/blog/708704

  4. iframe 问题集合

    1. 历史记录问题 Firefox: 如果iframe是静态存在在HTML中时,iframe的任何src或者location改变都会被记录到浏览器history中. 如果iframe是在页面加载完成后 ...

  5. CMS垃圾回收

    最近在学习JVM和GC调优,今天总结下CMS的一些特点和要点,让我们先简单的看下整个堆年轻代和年老代的垃圾收集器组合(以下配合java8完美支持,其他版本可能稍有不同),其中标红线的则是我们今天要着重 ...

  6. 关闭所有的screen

    由于开了很多个screen同时工作,关闭是一个一个比较麻烦,写个命令在这以便日后想不起来时可以用到.1.先看看有多少个screen screen -ls |awk '/Socket/'|awk '{p ...

  7. Linux C single linked for any data type

    /************************************************************************** * Linux C single linked ...

  8. Adobe Flash Player - imsoft.cnblogs

    Adobe Flash Player是一个跨平台.基于浏览器的应用程序.运行时,它可以跨屏幕和浏览器原汁原味地查看具有表现力的应用程序.内容和视频.Flash Player实现了移动屏幕上的高性能优化 ...

  9. URAL - 1397:Points Game (博弈,贪心)

    Two students are playing the following game. There are 2· n points on the plane, given with their co ...

  10. Python编码——常见的编码设置

    1.查看自己电脑的python的编码设置 # -*- coding: utf8 -*- import sys, locale """ locale.getpreferre ...