文字和img、input并排无法对齐的问题
文字和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并排无法对齐的问题的更多相关文章
- 如何利用CSS代码使图片和文字在同一行显示且对齐
对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...
- CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...
- 图片 文字 input等垂直居中对齐
span::before { width:100%; height:1px; font-size:1em; content:''; background:#fff; position:absolute ...
- 关于input标签无法对齐的解决方法!
在布局中发现各个input之间很难对齐,解决方法如下: 将input设置vertical-align属性: vertical-align:middle vertical-align:top verti ...
- label 和input/textarea居中对齐
设置label和input/textarea的vertical-align: middle;即可实现垂直方向居中对齐.有时候可能会有偏差,设置input的margin-top使看上去居中对齐
- input lable水平对齐
1.CSS <style type="text/css"> input,label { vertical-align:middle;} </style ...
- input 标签左对齐
不要忘记下载jquery包,并引用到工程文件里. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...
- 点击文字,把input type="radio"也选中
本文原文地址:https://my.oschina.net/jack088/blog/469815 1. <label> <input type="radio" ...
- TextMesh Pro Emoji Align With Text(表情和文字对齐)
前言 MMO游戏中需要富文件组件,大体功能包括图文混排,表情,超链接,文字动画等富文本功能,且DC数占用少. 本文选择Unity免费提供的TextMesh Pro 解决方案. 软件环境 Unity3D ...
随机推荐
- pip删除依赖、配置虚拟环境
问题:跑openpose代码的时候,出现问题 tensorpack 0.8.6 requires tqdm>4.11.1, which is not installed.tf-pose 0.1. ...
- Swift 编程语言入门教程
1 简介 今天凌晨Apple刚刚发布了Swift编程语言,本文从其发布的书籍<The Swift Programming Language>中摘录和提取而成.希望对各位的iOS& ...
- jQuery自动完成点击html元素
/************************************************************************** * jQuery自动完成点击html元素 * 声 ...
- 20155237 2016-2017-2 《Java程序设计》第6周学习总结
20155237 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 输入与输出 InputStream与OutputStream 流(Stream)是对 ...
- vue组件独享守卫钩子函数参数详解(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)
一样的和前面路由钩子类似的步骤 首先在demo下面的components下面新建一个test.vue组件 test组件代码 <template> <div class="t ...
- 【mysql】修改数据时候,抛出safe mode相关错误,处理方法
在mysql5中,可以设置safe mode,比如在一个更新语句中 UPDATE table_name SET bDeleted=0; 执行时会错误,报: You are using safe upd ...
- python 编码类型
碰到各种编码混用, 则需要搞清楚. http://blog.csdn.net/lxdcyh/article/details/4018054. https://www.jianshu.com/p/a5b ...
- 使用jsonp进行跨站点数据访问
使用jsonp 可以解决ajax 的跨域问题,使用起来比较简单. 具体的测试环境搭建如下 1.一个简单的MVC 站点 2.一个简单的html文件(这次的测试是在web 站点中,当然可以是一个简单的ht ...
- C#:消息队列应用程序
Carl NolanMicrosoft Corporation 摘要:本文概述一种用于处理若干消息队列的 Windows 服务解决方案,重点介绍 .NET 框架和 C# 应用程序. 下载 CSharp ...
- Composer 技巧(以 FastAdmin 项目为基础)(2018-12-25 更新)
Composer 技巧(以 FastAdmin 项目为基础) 查看 FastAdmin 所有的已安装的 php 组件,如果不加 i 就是查看 composer.json 里的组件. composer ...