文字和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这个吧,不过也算是个解决办法。

时间: 2024-08-30 08:14:18

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

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

CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法有3种:1.通过添加css的“vertical-align:middle;”:2.如果图片是背景图片,可以在css中设置背景图片:3.把文字和图片分别放入不同的div中.上面三种方法都可以让图片和文字在同一行显示,下面我们用实例来应用一下. 1.添加上“vertical-align:middle”属

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

对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同一行显示且对齐呢? 对于这种现象,方法有3种: 1.通过添加css的“vertical-align:middle;”: 2.如果图片是背景图片,可以在css中设置背景图片,然后设置文字的padding属性: 3.把文字和图片分别放入不同的div中. 经过多次的测试,上面三种方法都可以让图片和文字在同

文字的默认基线是底部对齐的

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css 文字的默认基线是对齐的</title> 6 <style> 7 div{font-size: 50px;} 8 div span{font-size:20px;} 9 </style> 10 </he

input 标签左对齐

不要忘记下载jquery包,并引用到工程文件里. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; chars

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

1. <label> <input type="radio" name="radiobutton" value="radiobutton" />测试? </label> 2. <label for="radiobutton"> <input type="radio" name="radiobutton" id="radiob

文字与单选复选框对齐

<style> .box3>input { vertical-align: middle; margin-top: -2px; margin-bottom: 1px } </style> <p> vertical-align: middle;margin-top: -2px;margin-bottom: 1px</p> <p>把此元素放置在父元素的中部</p> <div class="box3">

iOS设置button上的文字和图片上下垂直/水平居中对齐

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];//button的类型  button.frame = CGRectMake(100, 100,90, 90);//button的frame  button.backgroundColor = [UIColor cyanColor];//button的背

复选框和文字对齐解决方案

<!Doctype html><html> <head> <title></title> <meta charset="utf-8" /> </head> <style type="text/css">.zxx_exp{display:block; color:#34538b; margin-top:5px; margin-left:4px;}.input_align_1

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

前言 MMO游戏中需要富文件组件,大体功能包括图文混排,表情,超链接,文字动画等富文本功能,且DC数占用少. 本文选择Unity免费提供的TextMesh Pro 解决方案. 软件环境 Unity3D 5.3.7p4 TextMesh Pro 1.0.555.0b11(Jul 06.2017) TexturePack 3.x TextMeshPro文档和资料 Asset Store(免费下载):https://www.assetstore.unity3d.com/cn/#!/content/84